javascript - SVG 滤镜不会在悬停时消失

Question

我目前正在研究一些新东西，我已经接触到 SVG 对象的世界。他们很好。我有一个自己制作的按钮，我在上面放了一个过滤器。与我合作的设计师希望滤镜(阴影)在悬停时从不透明度 1 变为 0，并在悬停时返回 1。

我已经在滤镜上尝试了正常的过渡，我可以让滤镜消失，但过渡很不平滑。

这是我的代码:

HTML

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" style="enable-background:new 0 0 216 216;" xml:space="preserve">
  <filter id="fade" height="150%" width='150%'>
     <feMerge>
      <feMergeNode/>
      <!-- this contains the offset blurred image -->
      <feMergeNode in="SourceGraphic" />
      <!-- this contains the element that the filter is applied to -->
    </feMerge>
  </filter>
  <filter id="dropshadow" height="150%" width='150%'>
    <feGaussianBlur in="SourceAlpha" stdDeviation="25" />
    <!-- stdDeviation is how much to blur -->
    <feOffset dx="0" dy="15vh" result="offsetblur" />
    <!-- how much to offset -->
    <feComponentTransfer>
      <feFuncA type="linear" slope="0.4" />
    </feComponentTransfer>
    <feMerge>
      <feMergeNode/>
      <!-- this contains the offset blurred image -->
      <feMergeNode in="SourceGraphic" />
      <!-- this contains the element that the filter is applied to -->
    </feMerge>
  </filter>
  <a href='' id='playvideo_button'>
    <g>
      <path class="st0" d="M108,24c-46.4,0-84,37.6-84,84s37.6,84,84,84s84-37.6,84-84S154.4,24,108,24z" />
      <polygon class="st1" points="92,140 92,76 140,108" />
    </g>
  </a>
</svg>

CSS

svg {
  width: 30vw;
  height: 30vh;
  cursor: pointer;

}

svg .st0 {
  fill: #4982CF;
  transition: filter.6s ease-out;
  filter: url(#dropshadow);
}
svg .st1 {
  fill: #ffffff;

}
svg:hover .st0{
  filter: url(#fade);
}

这里是 my Fiddle我一直在玩弄它。

编辑

我创建了第二个滤镜，它只是一个透明的叠加层，但它也失败了，并且产生了同样不平滑的效果。我在这里几乎不知所措。

Answer 1

在过滤器上使用过渡不是执行此操作的方法。这是一种更优雅的方式。这里有很多事情你应该注意:

• 您需要正确调整 svg 和滤镜区域的大小，以确保阴影不会被切断
• 你不能转换过滤器
• 对 CSS 单位的支持在 SVG 过滤器中没有可靠的支持，坚持使用 objectBoundingBox (%) 或 userSpaceOnUse (viewbox) 单位

• 看看我是如何构造滤镜的，让它可以绘制在形状的顶部(以捕捉悬停)而不遮挡它。那是过滤器的“operator="out"部分。

• 将过滤器包含在 defs 元素中。一些浏览器需要这个。

• 不要使用 Illustrator 导出文件作为样板文件。它们确实不是构造良好的 SVG。

一般来说，学习 SVG 最糟糕的方法是尝试解码或调整 Illustrator 导出代码。这只是一场彻头彻尾的疯狂灾难。

svg {
  width: 30vw;
  height: 30vh;
  cursor: pointer;
}

svg .st0 {
  fill: #4982CF;
}

svg .st1 {
  fill: #ffffff;
}

#usedshadow {
   opacity: 1;
   transition: opacity 0.6s;
}

#usedshadow:hover {
   opacity: 0;
   transition: opacity 0.6s;
}

<svg version="1.1" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300">

  <defs>
    <filter id="dropshadow" x="-50%" y="-50%" height="200%" width='200%'>
      <feGaussianBlur in="SourceAlpha" stdDeviation="10" />
      <!-- stdDeviation is how much to blur -->
      <feOffset dx="0" dy="15" result="offsetblur" />
      <!-- how much to offset -->
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.4" />
      </feComponentTransfer>
      <feComposite operator="out" in2="SourceGraphic"/>
    </filter>

    <g id="myshape">
      <path class="st0" d="M108,24c-46.4,0-84,37.6-84,84s37.6,84,84,84s84-37.6,84-84S154.4,24,108,24z" />
      <polygon class="st1" points="92,140 92,76 140,108" />
    <g>

  </defs>

  <use xlink:href="#myshape"/>
  <use id="usedshadow" filter="url(#dropshadow)" xlink:href="#myshape"/>

</svg>