我正在使用 SVG 符号 this way ，但是 SVG 的 display:none 隐藏了图形的渐变。有什么想法吗？
在下面的示例中，应该有两个圆圈，但隐藏了红色圆圈:
<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>关于css - 使用 SVG 符号隐藏渐变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40562818/