<linearGradient>

使用语境

属性

渐变单位

此属性定义了 x1、x2、y1、y2 属性的坐标系统。值类型：userSpaceOnUse | objectBoundingBox；默认值：objectBoundingBox；可动画：是

渐变变换

此属性为渐变坐标系提供了额外的 变换。值类型：<transform-list>；默认值：单位变换；可动画：是

href

此属性定义了一个对另一个将用作模板的 <linearGradient> 元素的引用。值类型：<URL>；默认值：无；可动画：是

扩展方法

此属性指示当渐变在包含渐变的形状边界内开始或结束时，渐变的行为方式。值类型：pad | reflect | repeat；默认值：pad；可动画：是

x1

此属性定义了绘制线性渐变的向量渐变起点的 x 坐标。值类型：<length>；默认值：0%；可动画：是

x2

此属性定义了绘制线性渐变的向量渐变终点的 x 坐标。值类型：<length>；默认值：100%；可动画：是

xlink:href 已弃用

对另一个将用作模板的 <linearGradient> 元素的 <IRI> 引用。值类型：<IRI>；默认值：无；可动画：是

y1

此属性定义了绘制线性渐变的向量渐变起点的 y 坐标。值类型：<length>；默认值：0%；可动画：是

y2

此属性定义了绘制线性渐变的向量渐变终点的 y 坐标。值类型：<length>；默认值：0%；可动画：是

DOM 接口

此元素实现了 SVGLinearGradientElement 接口。

示例

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

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

规范

浏览器兼容性