SVG 元素

SVG 元素用于定义渐变中的颜色停止点。渐变是一种颜色平滑过渡的效果，可用于填充形状、边框等图形元素。

语法

<stop offset="[number or %]" stop-color="[color]" stop-opacity="[opacity]"/>

• offset：定义停止点的位置，取值为 0~1 之间的浮点数或百分比，默认为 0。
• stop-color：定义停止点的颜色，取值为颜色关键字、十六进制值、RGB 值等。
• stop-opacity：定义停止点的不透明度，取值为 0~1 之间的浮点数，默认为 1。

示例

创建从绿色到黄色的渐变：

<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
  <stop offset="0%" style="stop-color:rgb(34,139,34);stop-opacity:1" />
  <stop offset="100%" style="stop-color:rgb(255,215,0);stop-opacity:1" />
</linearGradient>

<rect x="0" y="0" width="500" height="200" fill="url(#grad)" />

渐变的起始点为 (0%,0%)，结束点为 (100%,0%)，中间包含两个停止点，第一个停止点的颜色为绿色 (#228B22)，不透明度为 1；第二个停止点的颜色为黄色 (#FFD700)，不透明度为 1。

注意事项

• offset 属性可以指定多个停止点，并且停止点可以按任意顺序排列。
• 如果没有指定停止点的位置， 元素会默认排列在前一个停止点之后，即前一个停止点的 offset 值为 1 时，下一个停止点的 offset 值默认为 0。
• 如果两个相邻的停止点具有相同的 offset 值，则它们将被视为一个停止点。
• 如果指定了多个渐变，则可以使用 xlink:href 属性来引用先前定义的停止点。

参考链接

• MDN Web Docs - SVG element