如何在页面全局 CSS 文件中定义 SVG 渐变答案

【问题标题】：How to define SVG gradient in page-global CSS file如何在页面全局 CSS 文件中定义 SVG 渐变
【发布时间】：2015-11-09 23:50:58
【问题描述】：

在我的 HTML 页面上，我有一些 JavaScript 代码可以生成 SVG 元素并将它们添加到 HTML 页面中。

目前，这些 SVG 的所有样式（填充颜色等）都在 页面的 CSS 中定义。这样 SVG 可以使用相同的 CSS 类，我只需要定义一次属性。

现在我希望这些 SVG 使用线性渐变。然而，MDN 似乎没有揭示任何在页面全局 CSS 中定义线性渐变的方法。所以我的问题如下：

有没有办法在页面全局 CSS 中定义线性渐变？
如果不是，并且如果我要在每个 SVG 中使用 <linearGradient> 元素定义线性渐变，它们具有相同的 ID 是否可以？ fill: url(#my-gradient) 会正确访问相关 SVG 的渐变吗？
如果没有，我如何声明一个带有任何 SVG 之外 ID 的 <linearGradient>？是否可以有一个只定义渐变的“虚拟”SVG，并且 CSS 可以通过其 ID 引用该渐变？

【问题讨论】：

标签： html css svg gradient

【解决方案1】：

有没有办法在页面全局 CSS 中定义线性渐变？

没有。您可以使用 CSS 设置某些 linearGradient 属性的样式，但不能定义渐变本身。

如果不是，并且我要使用每个 SVG 中的一个元素来定义线性渐变，它们是否可以具有相同的 ID？

如果你的意思是多个linearGradient具有相同的id，那么编号id属性必须是唯一的。

如果没有，我如何在任何 SVG 之外声明一个带有 ID 的单曲？是否有可能有一个只定义渐变的“虚拟”SVG，并且 CSS 可以通过其 ID 引用该渐变？

您可以在一个内联 SVG 中定义一个 linearGradient 并从另一个内联 SVG 访问它。您可以使用 CSS 来分配渐变。

svg rect {
  fill: url(#mygradient);
}

#mygradient stop.start-color {
  stop-color: red;
}

#mygradient stop.end-color {
  stop-color: blue;
}

<svg width="0" height="0">
  <defs>
    <linearGradient id="mygradient">
      <stop offset="0" class="start-color"/>
      <stop offset="1" class="end-color"/>
    </linearGradient>
  </defs>
</svg>

<svg>
  <rect width="300" height="150"/>
</svg>

【讨论】：