<linearGradient>

<linearGradient> 元素允许作者定义线性渐变以应用于其他 SVG 元素。

示例

html,
body,
svg {
  height: 100%;
}

html

<svg
  viewBox="0 0 10 10"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="5%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
  </defs>

  <!-- using my linear gradient -->
  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>

属性

gradientUnits: 此属性定义了属性 x1、x2、y1、y2 的坐标系 值类型：userSpaceOnUse|objectBoundingBox；默认值：objectBoundingBox；可动画：是
gradientTransform: 此属性为渐变坐标系提供了额外的变换。 值类型：<transform-list>；默认值：恒等变换；可动画：是
href: 此属性定义了对另一个 <linearGradient> 元素的引用，该元素将用作模板。 值类型：<URL>；默认值：无；可动画：是
spreadMethod: 此属性指示如果渐变在包含渐变的形状的边界内开始或结束，则渐变的行为。 值类型：pad|reflect|repeat；默认值：pad；可动画：是
x1: 此属性定义了线性渐变绘制的矢量渐变起点沿 X 轴的坐标。 值类型：<length-percentage> | <number>；默认值：0%；可动画：是
x2: 此属性定义了线性渐变绘制的矢量渐变终点沿 X 轴的坐标。 值类型：<length-percentage> | <number>；默认值：100%；可动画：是
xlink:href 已弃用: 对将用作模板的另一个 <linearGradient> 元素的 <IRI> 引用。 值类型：<IRI>；默认值：无；可动画：是
y1: 此属性定义了线性渐变绘制的矢量渐变起点沿 Y 轴的坐标。 值类型：<length-percentage> | <number>；默认值：0%；可动画：是
y2: 此属性定义了线性渐变绘制的矢量渐变终点沿 Y 轴的坐标。 值类型：<length-percentage> | <number>；默认值：0%；可动画：是

使用上下文

类别	渐变元素
允许的内容	任意数量的以下元素，按任意顺序描述性元素 `<animate>`、`<animateTransform>`、`<set>`、`<stop>`

规范

规范
可缩放矢量图形 (SVG) 2 # 线性渐变

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。