Question

我一直在网站上玩SVG，我一直试图让filter工作，但我似乎无法做到正确。

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

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

但没有成功。

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

代码：

.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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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>

Answer 3

删除定义SVG上的display: none;并将其标注为0。这应该做到这一点。不知何故，过滤器可能会继承display: none。

＆＃13;

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

＆＃13;

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

＆＃13;

关于过渡，我不认为你可以通过使用引用过滤器来做到这一点。

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

代码：

3 个答案: