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

Timwi

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

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

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

  • 有什么方法可以在页面全局CSS中定义线性渐变吗?
  • 如果不是,并且如果我要<linearGradient>在每个SVG中使用一个元素定义线性渐变,那么它们具有相同的ID是否可以?fill: url(#my-gradient)正确地从相关SVG访问梯度?
  • 如果没有,我如何声明一个<linearGradient>ID在任何SVG之外的单身是否可以有一个仅定义渐变的“虚拟” SVG,而CSS可以通过其ID引用该渐变?
保罗·勒博

有什么方法可以在页面全局CSS中定义线性渐变吗?

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

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

如果您要表示多个具有相同ID的linearGradient,则ID号属性必须是唯一的。

如果没有,如何声明一个ID不在任何SVG之外的单身?是否可以有一个仅定义渐变的“虚拟” SVG,而CSS可以通过其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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章