css - 来自另一个不可见 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;
}

结果，带有 filter 属性的 path 也消失了，就像浏览器完全删除了第二个 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

评论后编辑

1. 为什么当我返回 display:none 时路径仍然可见？这是关于浏览器行为的问题。我看到它发生在 Chrome 中，但不是在 Firefox 中。显然，正确的行为是 Firefox 的行为。

2. 您引用的文档说“它不会阻止元素被其他元素引用”正在引用该元素，但其 display 属性为 none，这就是您看不到任何颜色的原因。您正在应用隐形过滤器。

3. 显示属性不被继承文件第三段内容如下:

   当应用于容器元素时，将 display 设置为 none 会导致容器和它的所有 child 都不可见；因此，它作用于群体元素作为一个组。这意味着元素的任何子元素display="none"永远不会被渲染，即使 child 有一个值不显示。

请记住，我们谈论的是 svg display，而不是 css display。