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

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

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

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

• 有没有办法定义页面全局CSS中的线性渐变
• 如果不是，并且如果我要在每个SVG中使用
  元素定义线性渐变，那么它们可以使用相同的ID吗？

  fill:url（#我的渐变）

  是否可以从相关SVG正确访问渐变
• 如果不是，我如何在任何SVG之外声明一个ID为的
  ？是否可能有一个只定义渐变的“虚拟”SVG，CSS可以通过其ID引用渐变

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

不可以。您可以使用CSS设置一些

linearGradient

属性的样式，但不能定义渐变本身

如果不是，并且如果我要在每个SVG中使用一个元素定义线性渐变，那么它们可以使用相同的ID吗

如果您指的是具有相同id的多个linearGradient，则No.id属性必须是唯一的

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

您可以在一个内嵌SVG中定义linearGradient，并从另一个内嵌SVG访问它。可以使用CSS指定渐变

svg-rect{
填充：url（#mygradient）；
}
#mygradient stop.start-color{
停止颜色：红色；
}
#mygradient stop.end-color{
停止颜色：蓝色；
}