通过 CSS 重新使用 SVG 渐变

Question

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

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

  <rect width="100" height="50"/>
</svg>

并使用 ng-class 我可以换出不止一个这些渐变，除非我将 <linearGradient> 包含在嵌入到每个 SVG 中的 def 中，否则我只能让它工作。

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

那么，对于同一个难题，是否有 html5/css3/angular 方法？必须对多个 SVG 和可能多个相同的 Gradient defs 重复每个单独的 SVG 的想法听起来是错误的。

Answer 1

您应该能够定义一次渐变，然后在 CSS 中调用它以在任何地方应用。您可以应用于所有 svg 或给它一个 class.

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

通过 CSS 重新使用 SVG 渐变

Re-using SVG gradient via CSS

html

css

svg

gradient

angularjs