通过CSS重复使用SVG渐变

Question

通过CSS重复使用SVG渐变

3

我知道可以使用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，我可以交换多个渐变效果，但是如果我不将

- Chris W.

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- melissa.mcmurtrie · Accepted Answer

您应该能够定义渐变，然后在 CSS 中调用它以应用于任何地方。您可以将其应用于所有 SVG 或为其指定一个类。

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