如果应用过滤器，SVG 会消失答案

【问题标题】：SVG disappears if filter is applied如果应用过滤器，SVG 会消失
【发布时间】：2016-02-17 00:23:02
【问题描述】：

我一直在网站上使用SVGs，我一直在尝试让filters 工作，但我似乎无法做到。

问题是，一旦我应用定义的filter，svg 就会完全消失。我尝试应用 filter 内联，看看它是否有效，如下所示：

<symbol id="circle" viewBox="0 0 400 209.603" filter="url('#blur-filter')">
...
</symbol>

但没有成功。

最终，我的目标是我能够通过 CSS 应用 filters，但我似乎无法让它工作，这是我第一次真正玩弄 @987654329 @s，所以我不知道我是否犯了一些明显的错误。

代码：

.svg-circle:hover {
  filter: url("#blur-filter");
}
.svg-grey {
  fill: #333;
}

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <defs>
    <filter id="blur-filter">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
    </filter>
    <symbol id="circle" viewBox="0 0 400 209.603">
      <circle cx="100" cy="100" r="100" />
    </symbol>
  </defs>
</svg>

<svg>
  <use xlink:href="#circle" class="svg-circle svg-grey"/>
</svg>

我希望在将鼠标悬停在元素上时应用 filter。我的另一个问题是如何将它与 CSS transitions 结合起来，以便逐渐应用 blur，就像其他 css3 transitions 一样。

我还希望过滤器是全局的，因此可以在需要时在多个 svg 图像中重复使用它们，因此定义一次，然后重复使用。

我还创建了一个Codepen 来演示我的问题。

【问题讨论】：

标签： html css svg

【解决方案1】：

删除您的style="display:none" 并将width:0 添加到您的第一个svg

.svg-circle:hover {
  filter: url("#blur-filter");
}
.svg-grey {
  fill: #333;
}
svg:first-of-type {
  width:0
}

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="blur-filter">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
    </filter>
    <symbol id="circle" viewBox="0 0 400 209.603">
      <circle cx="100" cy="100" r="100" />
    </symbol>
  </defs>
</svg>
<svg>
  <use xlink:href="#circle" class="svg-circle svg-grey"/>
</svg>

【讨论】：

这似乎是一个很好的思路，但display: none 的存在是有原因的。正如您在示例中看到的那样，svg 标签占用了一些空间，这不是我想要的。我想在我的 html 顶部定义，它们不应该占用空间。你知道如何解决这个问题吗？
@Pavlin，但默认情况下它们不占用空间。
@Qwertiy 但如果你看一下他的第一个 sn-p，它确实会占用空间。
@Pavlin 我更新了我的第一个sn-p，去掉空格，看看
@Pavlin，因为您没有指定尺寸。看我的回答。

【解决方案2】：

删除定义 SVG 上的 display: none; 并将其设为 0 维。这应该这样做。过滤器可能会以某种方式继承display: none。

.svg-circle:hover {
  filter: url("#blur-filter");
}
.svg-grey {
  fill: #333;
}

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <defs>
    <filter id="blur-filter">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
    </filter>
    <symbol id="circle" viewBox="0 0 400 209.603">
      <circle cx="100" cy="100" r="100" />
    </symbol>
  </defs>
</svg>

<svg>
  <use xlink:href="#circle" class="svg-circle svg-grey"/>
</svg>

至于过渡，我认为你不能通过使用引用的过滤器来做到这一点。

【讨论】：

我记得，如果它们都内联到相同的 html 并且 id 是唯一的，或者如果您指定其他 svg 的路径（不仅仅是锚点），您可以。
您的示例确实有效，但与我想要实现的目标相反。我想要顶部的 svg 定义，以便我可以在页面中多次重复使用它们。如果我按照您的方式进行操作，则需要在整个页面中多次复制路径。
@Pavlin 我的第一个假设是错误的。我更新了答案。

【解决方案3】：

html, body {
  margin: 0;
  padding: 0;
}

.svg-circle:hover {
  filter: url("#blur-filter");
}

.svg-grey {
  fill: #333;
}

<svg width="0" height="0">
  <defs>
    <filter id="blur-filter">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
    </filter>
    <symbol id="circle" viewBox="0 0 400 209.603">
      <circle cx="100" cy="100" r="100" />
    </symbol>
  </defs>
</svg><svg width="400" height="210">
  <use xlink:href="#circle" class="svg-circle svg-grey"/>
</svg>

【讨论】：

没有解释的sn-p？这通常不是一个好的答案
@dippas，见comment。