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

Question

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

我不确定如何在考虑我讨论外部代码而非内联代码时放置代码段，所以这里是一个链接到相关的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进行样式设置

.color1 {
  stop-color: green
}
.color2 {
  stop-color: yellow
}
#logo1 {
  fill: url(#g1)
}
#logo2 {
  fill: url(#g2)
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="0" height="0">
  <linearGradient id="g1">
    <stop offset="0" class="color1" />
    <stop offset="1" class="color2" />
  </linearGradient>
  <radialGradient id="g2">
    <stop offset="0" class="color1" />
    <stop offset="1" class="color2" />
  </radialGradient>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <circle id="logo1" cx="50" cy="50" r="45" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <circle id="logo2" cx="50" cy="50" r="45" />
</svg>