通过 CSS 重用 SVG 渐变

Posted 2023-03-06

【中文标题】通过 CSS 重用 SVG 渐变

【英文标题】：Re-using SVG gradient via CSS

【发布时间】：2015-06-23 11:00:04

【问题描述】：

所以我知道我可以用 css 替换 svg 上的渐变填充，例如；

<svg   version="1.1" xmlns="http://www.w3.org/2000/svg">
  <style type="text/css">
    rectfill:url(#GradientSwap1)
  </style>
  <defs>
    <linearGradient id="GradientSwap1">
      <stop offset="5%" stop-color="#F00" />
      <stop offset="95%" stop-color="#999" />
    </linearGradient>
  </defs>

  <rect  />
</svg>

并且使用 ng-class 我可以换出多个这些渐变，除非我在嵌入到每个 SVG 的 defs 中包含 <linearGradient> 才能让它工作。

我的问题是，我似乎无法弄清楚。有没有办法将这些渐变定义从 SVG 中提取出来，并将它们变成我可以在其他人中使用的资源？就像在 .NET / XAML 世界中一样，我很容易将它们拉出来，将它们放入资源字典中，然后在所有地方使用相同的内容来做我喜欢的任何事情。

那么有没有 html5/css3/angular 方法来解决同样的难题？必须为多个 SVG 重复可能多个相同的 Gradient defs 的想法听起来是错误的。

【参考方案1】：

您应该能够定义一次渐变，然后在 CSS 中调用它以应用到任何地方。你可以申请所有的 svgs 或者给它一个类。

<svg>
<defs>
<linearGradient id="GradientSwap1">
  <stop offset="5%" stop-color="#F00"></stop>
  <stop offset="95%" stop-color="#999"></stop>
</linearGradient>
</defs>

<section>
<svg class="icon shape-facebook">
    <path d="M28.3,62V35.2h-5.5v-9.4h5.6v-7.7c0,0,0.3-9.8,9.8-9.8s9.5,0,9.5,0v9.2H42.1c0,0-2.699,0-2.699,2.7c0,2.7,0,5.8,0,5.8H48
l-1.1,9.4H39.6V62H28.3z"></path>
</svg>
<svg class="icon shape-heart" x="0" y="0">
        <path d="M35.645,59.413c0,0,26.949-19.601,26.949-34.12c0-16.752-22.049-22.047-26.949-1.674
    c-4.9-20.373-26.95-15.078-26.95,1.674C8.695,39.812,35.645,59.413,35.645,59.413z"></path>
</svg>

.shape-heart  fill: url('#GradientSwap1'); 

http://jsfiddle.net/v6osyy5v/1/

【讨论】：

太酷了！ +1除了这条路线是否会使渐变仅在引用它的svg所在的同一视图中可用？或者可以将渐变放在某个地方，使其像类一样在全球范围内可用？

没错——你需要把它放在一个全局的地方——就在开始的body标签或类似的东西之后，否则它只会在它实际所在的视图中可用。

哦，对了，我没有将索引连接作为全局资源点，就像我必须从 .net 世界中翻译东西一样，它一开始没有点击，谢谢！