如何使用 CSS 将线性渐变应用于 SVG 矩形元素？

使用 CSS 将线性渐变应用于 SVG 矩形元素

为了增强视觉效果，开发人员经常寻求将线性渐变应用于 SVG 矩形元素。本问题深入探讨了利用 CSS 实现此类渐变的技术。

CSS 方法

要通过 CSS 将线性渐变应用于 SVG 矩形元素，请利用填充属性，就像在任何其他元素的 fill 属性中一样。在 SVG 本身中定义线性渐变至关重要。

考虑这个示例：

<code class="css">rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: url(#MyGradient);
}</code>

<code class="html"><svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <style type="text/css">
        rect{fill:url(#MyGradient)}
      </style>
      <defs>
        <linearGradient id="MyGradient">
          <stop offset="5%" stop-color="#F60" />
          <stop offset="95%" stop-color="#FF6" />
        </linearGradient>
      </defs>
      
      <rect width="100" height="50"/>
    </svg></code>

此代码定义了 中的线性渐变。元素并将其指定为 的填充值元素。结果，矩形将显示从 #F60 到 #FF6 的渐变色调。

以上是如何使用 CSS 将线性渐变应用于 SVG 矩形元素？的详细内容。更多信息请关注PHP中文网其他相关文章！