使用SVG符号隐藏的渐变

问题描述：

我使用的是SVG符号this way，但SVG的display:none隐藏了图形的渐变。任何想法？使用SVG符号隐藏的渐变

在下面的例子中，应该有两个圆圈，但红色的是隐藏：

<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>

我过去碰到过这个问题。 'display：none'会影响渐变。解决方案是使用其他方法来隐藏第一个SVG，而不是使用'display：none'。我试图找到一个可信的来源，如果我找到答案，我会发布答案。 – Harry

虽然这似乎是一个错误。这就是规范所说 - 即使'linearGradient'元素或其任何祖先的'display'属性设置为none *，'linearGradient'元素也可用于引用。但问题也出现在Firefox中。 – Harry

答

相反的display: none，你可以只使用width="0" height="0"。

<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，以避免不必要的空间。 http://codepen.io/anon/pen/bBpeZb –

使用SVG符号隐藏的渐变

相关推荐