如何从外部样式表渐变填充 SVG？

Question

我喜欢外部样式表，并希望能够通过外部表设置任何 SVG 图形的样式。我可以为我的 SVG 徽标声明单色笔触和填充，但我想要渐变填充。我已经尝试了一个视图，但无法正常工作。有人可以帮我弄清楚如何使它工作吗？

考虑到我正在讨论外部代码，而不是inline，我不确定如何放置代码片段，所以这里有一个指向相关 SVG 徽标及其匹配外部样式表的链接。

我试图在 SVG (PNG) 中重新创建的实际徽标：

SVG 标志：http : //www.cafenocturne.com/testpage/images/svg/CafeLogoSVG.svg

样式表：http : //www.cafenocturne.com/testpage/css/CafeLogoSVG.css

有一些注释掉的注释以确保我不会丢失我正在尝试实现的渐变代码，所以我很抱歉 CSS 文件是一团糟。一旦我可以让它正常工作，我就不需要在那里做笔记了。

那么我该如何实现呢？

Answer 1

将渐变添加到您的 SVG 文件，并从 CSS 更改停止颜色：

#color1 {
  stop-color: red
}
#color2 {
  stop-color: blue
}

<svg>
  <linearGradient id="lg">
    <stop id="color1" offset="0" />
    <stop id="color2" offset="1" />
  </linearGradient>
  <circle cx="50" cy="50" r="45" fill="url(#lg)" />
</svg>

如果您需要对渐变进行更多控制，可以在单独的文件中指定渐变（例如“myGradients.svg”）

<svg xmlns="http://www.w3.org/2000/svg">
  <linearGradient id="g1">
    <stop offset="0" stop-color="red"/>
    <stop offset="1" stop-color="blue"/>
  </linearGradient>
  <linearGradient id="g2">
    <stop offset="0" stop-color="green"/>
    <stop offset="1" stop-color="yellow"/>
  </linearGradient>
</svg>    

现在在你的css中你可以做

.logo {fill: url('myGradients.svg#g2');}

不幸的是，这在 chrome 中不起作用:-(

或者，您可以在徽标文件或 html 中复制渐变集合，并仍然使用 css 对其进行样式设置

<svg xmlns="http://www.w3.org/2000/svg">
  <linearGradient id="g1">
    <stop offset="0" stop-color="red"/>
    <stop offset="1" stop-color="blue"/>
  </linearGradient>
  <linearGradient id="g2">
    <stop offset="0" stop-color="green"/>
    <stop offset="1" stop-color="yellow"/>
  </linearGradient>
</svg>    

.logo {fill: url('myGradients.svg#g2');}