Фильтр SVG теряет цвет, когда SVG скрыт или является внешним - PullRequest
Новая
       8

Фильтр SVG теряет цвет, когда SVG скрыт или является внешним

1 голос
/ 03 июля 2019 

<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 идентично (за исключением другого идентификатора), отличается только то, что один скрыт с display:none, а другой использует position:absolute чтобы удалить его из поля зрения.

display:none приводит к тому, что фильтр не получает свой цвет, в результате чего получается черный цвет.Это также применимо, когда SVG загружается из внешнего файла с filter:url('/path/to/file.svg#blue-glow-external').

Что здесь происходит, и как я могу исправить эту проблему?

...