如何使用 CSS 将线性渐变应用于 SVG 矩形元素？-css教程-PHP中文网

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

Patricia Arquette

发布： 2024-10-30 17:13:02

原创

656 人浏览过

How to Apply Linear Gradients to SVG Rect Elements Using CSS?

使用 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中文网其他相关文章！