如果应用过滤器,SVG将消失

Question

我一直SVG在网站上玩s,我一直在尝试filter上班,但我似乎无法做到正确.

问题是,svg一旦我应用了一个定义的,它就完全消失了filter.我试图应用filter内联,只是为了看它是否有效,就像这样:

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

但没有成功.

最终,我的目标是我可以filter通过CSS 应用s,但我似乎无法让它工作,这是我第一次真正玩SVGs,所以我不知道如果我犯了一些明显的错误

码:

.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来演示我的问题.

Answer 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>