HTML SVG 渐变

SVG Gradient 用于在一个形状内将一种颜色平滑过渡到另一种颜色。 SVG 提供两种类型的渐变。

• 线性渐变：从一个方向过渡到另一个方向。
• 径向渐变：从一个方向到另一个方向从一种颜色循环过渡到另一种颜色。

线性渐变： linear-gradient() CSS函数用于创建一个图像，该图像由沿直线的两种或多种颜色之间的渐进过渡组成。

句法：

gradientUnits =”units to define 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” >

属性：

• gradientUnits：用于定义渐变内各种长度值的坐标系的单位。
• x1：梯度向量的 x 轴坐标。
• y1：梯度向量的y轴坐标。
• x2：梯度向量的 x 轴坐标。
• y2：梯度向量的y轴坐标。
• spreadMethod：表示在图形元素内扩展渐变的方法。默认为“垫”。
• xlink:href：用于引用另一个渐变。

例子：

输出：

Radial Gradients： radial-gradient() CSS函数用于创建一个图像，该图像由从原点辐射的两种或多种颜色之间的渐进过渡组成。它的形状可以是圆形或椭圆形。

句法：

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” >

属性：

• gradientUnits：用于定义渐变内各种长度值的坐标系的单位。
• cx：中心的x轴坐标
• cy：中心的y轴坐标
• r：中心半径。
• fx：径向渐变的焦点。
• fy：径向渐变的焦点。
• spreadMethod：表示在图形元素内扩展渐变的方法。默认为“垫”。
• xlink:href：用于引用另一个渐变。

例子：

输出：