首页  >  文章  >  web前端  >  如何在 CSS 中将渐变应用于 SVG 矩形?

如何在 CSS 中将渐变应用于 SVG 矩形?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-11-03 03:18:29483浏览

How to Apply Gradients to SVG Rectangles in CSS?

CSS 中 SVG 渐变

本问题涉及为 SVG 的 元素应用渐变。以下部分将解释如何在 CSS 中实现此功能。

fill 属性的使用

当前,您正在使用 fill 属性为 元素设置纯色。虽然这对于设置单一颜色填充非常有效,但它并不适用于渐变。

使用渐变

要应用线性渐变,您需要使用 url() 函数引用在 SVG 中定义的渐变定义。在 CSS 中,语法如下:

fill: url(#gradient-id);

其中 #gradient-id 是您在 SVG 中为渐变定义的 ID。

示例

以下代码展示了如何为 元素应用线性渐变:

CSS

rect {
  cursor: pointer;
  shape-rendering: crispEdges;
  fill: url(#MyGradient);
}

SVG

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

这将创建一个从红色(#F60)到橙色(#FF6)的水平渐变,应用于 元素。

以上是如何在 CSS 中将渐变应用于 SVG 矩形?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn