SVG Linear
SVG Linear （SVG线性）
Description of SVG gradients
Description of SVG gradients （SVG渐变的描述）
A gradient is a fluid transition from one color to another. It is possible to apply multiple color transitions to the same element. （渐变是从一种颜色到另一种颜色的流体过渡。可以对同一元素应用多个颜色转换。）
There exist two main kinds of gradients in SVG: （SVG中存在两种主要的梯度：）
linear （线性）
radial （径向）
The <linearGradient> element
The <linearGradient> element
The <linearGradient» element specifies linear gradients that fill graphical elements. It should be nested inside of a <defs> tag that contains definition of particular elements, like gradients.
Linear gradients can be horizontal, vertical, or angular: （线性渐变可以是水平、垂直或角度：）
Horizontal gradients - y1 and y2 are equal, and x1 and x2 differ. （-水平梯度- y1和y2相等， x1和x2不同。）
Vertical gradients - x1 and x2 are equal, and y1 and y2 differ. （-垂直梯度- x1和x2相等， y1和y2不同。）
Angular gradients - x1 and x2 vary, and y1 and y2 differ, too. （-角度梯度- x1和x2不同， y1和y2也不同。）
Never confuse an SVG linear gradient with the CSS radial-gradient property. CSS gradients apply to HTML elements, while the SVG gradients apply to SVG elements. （>切勿将SVG线性渐变与CSS径向渐变属性混淆。CSS渐变适用于HTML元素，而SVG渐变适用于SVG元素。）
Example of the <linear> element to create an ellipse with a horizontal linear gradient:
<!DOCTYPE html>
<html>
<body>
<svg height="200" width="300">
<defs>
<linearGradient id="ellipse" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(28, 135, 201);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(128, 0, 128);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="150" cy="90" rx="105" ry="65" fill="url(#ellipse)" />
</svg>
</body>
</html>
Example of the <linear> element to create an ellipse with a vertical linear gradient:
<!DOCTYPE html>
<html>
<body>
<svg height="300" width="400">
<defs>
<linearGradient id="ellipse" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(28, 135, 201);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(128, 0, 128);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="250" cy="100" rx="110" ry="70" fill="url(#ellipse)" />
</svg>
</body>
</html>
Attributes
Attributes （属性）
| Value | Description |
|---|---|
| gradientunits | This attribute specifies the coordinate system for attributes x1, x2, y1, y2. |
| gradienttransform | This attribute gives extra transformation to the gradient coordinate system. |
| href | This attribute specifies a reference to another <linearGradient> element. |
| spreadmethod | This attribute specifies how the gradient behaves if it starts or ends within the bounds of the shape that contains the gradient. |
| x1 | This attribute specifies the x coordinate of the beginning point of the vector gradient along which the linear gradient is being drawn. |
| x2 | This attribute specifies the y coordinate of the ending point of the vector gradient along which the linear gradient is being drawn. |
| y1 | This attribute specifies the y coordinate of the beginning point of the vector gradient along which the linear gradient is drawn. |
| y2 | This attribute specifies the y coordinate of the ending point of the vector gradient along which the linear gradient is drawn. |
The SVG <linear> element also supports the Global Attributes and Event Attributes.