SVG LinearGradientElement.x2 属性

SVG (Scalable Vector Graphics) 是一种用于描述二维矢量图形的 XML 标记语言。其中，linearGradient 标签用于创建线性渐变。而 SVG LinearGradientElement.x2 属性则表示渐变向量的终点在 x 轴上的坐标值。

属性值

SVG LinearGradientElement.x2 属性的属性值可以是以下任何有效的长度值之一：

• <length>：用于表示固定长度，例如 10px、0.5em 等等。对应的坐标值为该长度值。
• <percentage>：用于表示相对长度，例如 50%、25% 等等。对应的坐标值为相应方向的视口大小的一部分。

如果省略该属性，则默认值为 100%。

使用方法

SVG LinearGradientElement.x2 属性可以在 <linearGradient> 标签内部使用，并可通过 JavaScript 进行动态更改：

<svg>
  <defs>
    <linearGradient id="myGradient">
      <stop offset="0%" stop-color="red" />
      <stop offset="50%" stop-color="yellow" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
  </defs>

  <rect x="10" y="10" width="300" height="100"
        fill="url(#myGradient)" />

  <script>
    const gradient = document.getElementById("myGradient");
    gradient.x2.baseVal = 100;
  </script>
</svg>

在上述例子中，我们创建了一个 id 为 myGradient 的线性渐变，并将其应用到一个矩形上。随后，我们获取了该渐变，并将其终点的 x 坐标值更改为了 100%。

浏览器支持

| Chrome | Firefox | Safari | Edge | IE | | ------ | ------- | ------ | ---- | ---- | | 1.0 | 1.0 | 3.0 | 12 | 9.0 |

总结

SVG LinearGradientElement.x2 属性表示线性渐变向量的终点在 x 轴上的位置，它可以取值为固定长度或相对长度，并且可以通过 JavaScript 进行动态更改。