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中嵌入的defs中，否则我只能使它工作。

我的问题是，我似乎无法弄明白。有没有办法将这些梯度defs从SVG中拉出来并使它们成为我可以在其他人中使用的资源？就像在.NET / XAML世界中一样，我很容易将它们拉出来，将它们放入资源字典中，并在我喜欢的任何地方使用相同的那些。

对于同一个难题，还有html5 / css3 / angular方法吗？必须要有多个相同的Gradient defs的多个SVG的想法重复每一个只是听起来不对。

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

通过CSS重用SVG渐变

1 个答案: