Question

<svg style="display:none">
 <defs>
  <filter id="blue-glow-display-none">
   <feMorphology in="SourceAlpha" operator="dilate" radius="2" />
   <feGaussianBlur stdDeviation="1" result="dilated" />
   <feFlood flood-color="#33ccff" />
   <feComposite in2="dilated" operator="in" />
   <feOffset dy="-1" />
   <feMerge>
    <feMergeNode />
    <feMergeNode in="SourceGraphic" />
   </feMerge>
  </filter>
 </defs>
</svg>

<svg style="position: absolute; left: -9999px;">
 <defs>
  <filter id="blue-glow-position-absolute">
   <feMorphology in="SourceAlpha" operator="dilate" radius="2" />
   <feGaussianBlur stdDeviation="1" result="dilated" />
   <feFlood flood-color="#33ccff" />
   <feComposite in2="dilated" operator="in" />
   <feOffset dy="-1" />
   <feMerge>
    <feMergeNode />
    <feMergeNode in="SourceGraphic" />
   </feMerge>
  </filter>
 </defs>
</svg>

<img src="https://www.gravatar.com/avatar/6801bf30e40c9f7972987d67e2d5e4f2?s=48&d=identicon&r=PG" style="filter: url(#blue-glow-display-none)" />
&emsp;
<img src="https://www.gravatar.com/avatar/6801bf30e40c9f7972987d67e2d5e4f2?s=48&d=identicon&r=PG" style="filter: url(#blue-glow-position-absolute)" />

两个SVG的内容是相同的（不同的ID除外），唯一不同的是一个被display:none隐藏，而另一个使用position:absolute将其从视图中删除。 / p>

display:none导致滤镜无法获得其颜色，从而导致黑色。当使用filter:url('/path/to/file.svg#blue-glow-external')从外部文件加载SVG时，也是如此。

这是怎么回事，如何解决此问题？

隐藏或外部SVG时SVG滤镜失去颜色

0 个答案: