使用SVG符号隐藏的渐变 [英] Gradients hidden using SVG symbols
本文介绍了使用SVG符号隐藏的渐变的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用SVG符号以此方式,但是
I am using SVG symbols this way, but the display:none
of the SVG is hidden the gradients of the graphic. Any idea?
在下面的示例中,应该有两个圆圈,但是红色的圆圈被隐藏了:
In the example below, there should be two circles, but the red one is hidden:
<svg xmlns="http://www.w3.org/2000/svg" style='display:none' >
<defs>
<style>.red-gradient{fill:url(#gradient)}</style>
<linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="darkred"/>
</linearGradient>
</defs>
<symbol id="mysymbol" viewBox="0 0 100 100">
<circle class="red-gradient" cx="0" cy="50" r="50" />
<circle fill="green" cx="100" cy="50" r="50" />
</symbol>
</svg>
<svg><use xlink:href="#mysymbol" /></svg>
推荐答案
您可以使用width="0" height="0"
代替display: none
.
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" style="display:block">
<defs>
<style>.red-gradient{fill:url(#gradient)}</style>
<linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="darkred"/>
</linearGradient>
</defs>
<symbol id="mysymbol" viewBox="0 0 100 100">
<circle class="red-gradient" cx="0" cy="50" r="50" />
<circle fill="green" cx="100" cy="50" r="50" />
</symbol>
</svg>
<svg><use xlink:href="#mysymbol" /></svg>
这篇关于使用SVG符号隐藏的渐变的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文