SVG - Градиенты

Градиент относится к плавному переходу одного цвета к другому цвету внутри фигуры. SVG предоставляет два типа градиентов.

  • Linear Gradients - Представляет собой линейный переход одного цвета в другой от одного направления к другому.

  • Radial Gradients - Представляет собой круговой переход одного цвета в другой от одного направления к другому.

Линейные градиенты

Декларация

Ниже приводится объявление синтаксиса <linearGradient>элемент. Мы показали только основные атрибуты.

<linearGradient
   gradientUnits ="units to define co-ordinate system of contents of gradient"
   gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
   
   x1="x-axis co-ordinate" 
   y1="y-axis co-ordinate"     
   x2="x-axis co-ordinate" 
   y2="y-axis co-ordinate"     
   
   spreadMethod="indicates method of spreading the gradient within graphics element"
   xlink:href="reference to another gradient" >
</linearGradient>

Атрибуты

Sr.No. Имя и описание
1 gradientUnits- единицы измерения для определения системы координат для различных значений длины в пределах градиента. Если gradientUnits = "userSpaceOnUse", значения представляют значения в текущей пользовательской системе координат на месте в то время, когда используется элемент градиента. Если patternContentUnits = "objectBoundingBox", значения представляют значения в долях или процентах от ограничивающей рамки на ссылающемся элементе, находящемся на месте в то время, когда используется элемент градиента. По умолчанию - userSpaceOnUse.
2 x1- координата вектора градиента по оси абсцисс. Неисправность - 0.
3 y1- координата по оси Y вектора градиента. По умолчанию 0.
4 x2- координата вектора градиента по оси абсцисс. Неисправность - 0.
5 y2- координата по оси Y вектора градиента. По умолчанию 0.
6 spreadMethod- указывает способ распространения градиента внутри графического элемента. По умолчанию - pad.
7 xlink:href - используется для обозначения другого градиента.

пример

testSVG.htm
<html>
   <title>SVG Linear Gradient</title>
   <body>
   
      <h1>Sample SVG Linear Gradient</h1>
   
      <svg width="600" height="600">
      
         <defs>
            <linearGradient id="sampleGradient">
               <stop offset="0%" stop-color="#FF0000" />
               <stop offset="100%" stop-color="#00FFF00" />
            </linearGradient>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Linear Gradient: </text>
            <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3" 
            fill="url(#sampleGradient)" />
         </g>
         
      </svg>
   
   </body>
</html>
  • Один элемент <linearGradient>, определенный как sampleGradient.

  • В linearGradient два смещения определяются двумя цветами.

  • в элементе rect, в атрибуте fill указывается url градиента для заполнения прямоугольника градиентом, созданным ранее.

Вывод

Откройте textSVG.htm в браузере Chrome. Вы можете использовать Chrome / Firefox / Opera для просмотра изображения SVG напрямую, без каких-либо плагинов. Internet Explorer 9 и выше также поддерживает рендеринг изображений SVG.

Радиальные градиенты

Декларация

Ниже приводится объявление синтаксиса <radialGradient>элемент. Мы показали только основные атрибуты.

<radialGradient
   gradientUnits ="units to define co-ordinate system of contents of gradient"
   gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
   
   cx="x-axis co-ordinate of center of circle." 
   cy="y-axis co-ordinate of center of circle."     
   
   r="radius of circle" 
   
   fx="focal point for the radial gradient"     
   fy="focal point for the radial gradient"     
   
   spreadMethod="indicates method of spreading the gradient within graphics element"
   xlink:href="reference to another gradient" >
</radialGradient>

Атрибуты

Sr.No. Имя и описание
1 gradientUnits- единицы измерения для определения системы координат для различных значений длины в пределах градиента. Если gradientUnits = "userSpaceOnUse", значения представляют значения в текущей пользовательской системе координат на месте в то время, когда используется элемент градиента. Если patternContentUnits = "objectBoundingBox", значения представляют значения в долях или процентах от ограничивающей рамки на ссылающемся элементе, находящемся на месте в то время, когда используется элемент градиента. По умолчанию - userSpaceOnUse.
2 cx- координата по оси абсцисс центра наибольшего круга вектора градиента. Неисправность - 0.
3 cy- координата по оси ординат центра наибольшего круга вектора градиента. По умолчанию 0.
4 r- радиус центра наибольшего круга вектора градиента. Неисправность - 0.
5 fx- фокус радиального градиента. По умолчанию 0.
6 fy- фокус радиального градиента. По умолчанию 0.
7 spreadMethod- указывает способ распространения градиента внутри графического элемента. По умолчанию - pad.
8 xlink:href - используется для обозначения другого градиента.

пример

testSVG.htm
<html>
   <title>SVG Radial Gradient</title>
   <body>
      
      <h1>Sample SVG Radial Gradient</h1>
      
      <svg width="600" height="600">
         <defs>
            <radialGradient id="sampleGradient">
               <stop offset="0%" stop-color="#FF0000" />
               <stop offset="100%" stop-color="#00FFF00" />
            </radialGradient>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Radial Gradient: </text>
            <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"
            fill="url(#sampleGradient)" />
         </g>
      </svg>
      
   </body>
</html>
  • Один элемент <radialGradient>, определенный как sampleGradient.

  • В radialGradient два смещения определяются двумя цветами.

  • в элементе rect, в атрибуте fill указывается url градиента для заполнения прямоугольника градиентом, созданным ранее.

Вывод

Откройте textSVG.htm в браузере Chrome. Вы можете использовать Chrome / Firefox / Opera для просмотра изображения SVG напрямую, без каких-либо плагинов. Internet Explorer 9 и выше также поддерживает рендеринг изображений SVG.