Question

我正在使用SVG符号this way，但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>隐藏了图形的渐变。有什么想法吗？

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

Parallel.For

Answer 1

而不是display: none，您可以使用width="0" height="0"。

＆＃13;

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

＆＃13;

使用SVG符号隐藏的渐变

1 个答案: