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

Question

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

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

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

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

Answer 1

Is there any way to define the linear gradient in the page-global CSS?

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

If not, and if I were to define the linear gradient using a element within each SVG, is it OK for them to have the same ID?

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

If not, how can I declare a single with an ID outside of any SVG? Is it possible to have a “dummy” SVG that defines only the gradient and the CSS can refer to that gradient by its ID?

您可以在一个内联 SVG 中定义一个 linearGradient 并从另一个访问它。您可以使用 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>