Фильтр SVG из другого невидимого SVG полностью удаляет цель - PullRequest
Новая
       20

Фильтр SVG из другого невидимого SVG полностью удаляет цель

0 голосов
/ 02 октября 2019

Таким образом, у меня есть 2 элемента SVG на моей странице: один с путем и другой с фильтром (я сделал это, чтобы иметь возможность применить этот фильтр к нескольким SVG 

<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 1 1 " class="filter-target">
  <path filter="url(#glow)" d="M 0,0 v 1 h 1 v-1 h-1 z" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1 1" class="filter-source">
  <defs>
    <filter id="glow">
      <feFlood flood-color="rgb(0,0,255)" in="SourceAlpha" result="makeBlue" />
      <feMerge>
        <feMergeNode in="makeBlue"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
</svg>

Все было хорошо, но потом я решилчтобы скрыть второй SVG для предотвращения проблем с макетом, поэтому я создал следующий CSS: 

.filter-source {
  display: none;
}
.filter-target {
  width: 40px;
  height: 40px;
  border: 1px red dashed;
}

В результате атрибут path с filter также исчез, так же, как браузер полностью удалил второй SVG вместо того, чтобы скрыть.

Получил тот же эффект на Chrome 76 и Firefox 60 под Linux.

Это ошибка или спецификация?

Fiddle здесь

1 Ответ

0 голосов
/ 02 октября 2019

Фильтр наследует свойство display: none, поэтому на видимом svg ничего не отображается. Я думаю, что вы должны удалить код .filter-source css и просто добавить width="0" height="0" ко второй svg: 

.filter-target {
  width: 40px;
  height: 40px;
  border: 1px red dashed;
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 1 1 " class="filter-target">
  <path filter="url(#glow)" d="M 0,0 v 1 h 1 v-1 h-1 z" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1 1" class="filter-source" width="0" height="0">
  <defs>
    <filter id="glow">
      <feFlood flood-color="rgb(0,0,255)" in="SourceAlpha" result="makeBlue" />
      <feMerge>
        <feMergeNode in="makeBlue"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
</svg>
Now the layout is not interrumpted

РЕДАКТИРОВАТЬ после комментариев

  1. Why path stays visible when I return display:none back? Это вопрос о поведении браузера. Я вижу, что это происходит в Chrome, но не в Firefox. Очевидно, что правильное поведение соответствует поведению Firefox.

  2. documentation you referenced says "it does not prevent elements from being referenced by other elements" На элемент ссылаются, но его свойство display равно none, и поэтому вы не видите цвета,Вы применяете невидимый фильтр.

  3. display property is not inherited Третий абзац документа гласит:

    При применении к элементу контейнера, если для параметра display установлено значение none, контейнер становитсяи все его дети должны быть невидимыми;таким образом, он действует на группы элементов как на группу. Это означает, что любой дочерний элемент с display = "none" никогда не будет отображен, даже если дочерний элемент имеет значение для отображения, отличное от none.

Помните, что мы говоримо svg display, а не css display.

...