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

來源

2016-11-12 Daniel G. Blázquez

我過去碰到過這個問題。 '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>

來源

2016-11-12 13:01:01

不錯。將顯示：塊添加到第一個SVG，以避免不必要的空間。 http://codepen.io/anon/pen/bBpeZb –

使用SVG符號隱藏的漸變

回答

相關問題