在我的HTML页面上,我有一些JavaScript代码可以生成SVG元素并将其添加到HTML页面。
目前,这些SVG的所有样式(填充颜色等)都在页面的CSS中定义。这样,SVG可以使用相同的CSS类,并且我只需要定义一次属性。
现在,我希望这些SVG使用线性渐变。但是,MDN似乎没有揭示任何在页面全局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] 删除。
我来说两句