来自另一个不可见SVG的SVG过滤器可完全删除目标

Question

所以我的页面上有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而不是隐藏一样。

在Linux下的Chrome 76和Firefox 60上具有相同的效果。

是错误还是规格？

Fiddle is here

Answer 1

过滤器继承了属性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