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);
}

这里也是我一直在玩的小提琴的链接，如果需要任何其他资源，请告诉我！提前感谢您的所有帮助。

https://jsfiddle.net/sfza69ry/7/

EDITS

我创建了第二个过滤器，它只是一个透明的叠加层，但是也失败了并且做了同样的不平滑效果。

我在这里几乎不知所措。

Answer 1

在过滤器上使用过渡不是这样做的方法。这是一种更优雅的方式。你应该注意一些事情：

您需要正确调整svg和滤镜区域的大小，以确保阴影不会被切断
您无法过渡过滤器
SVG过滤器内部不可靠支持CSS单位，坚持使用objectBoundingBox（％）或userSpaceOnUse（viewbox）单位
看看我如何构建过滤器以允许它在形状上绘制（捕获悬停）而不会遮挡它。那是＆＃34;运营商=＆＃34; out＆＃34;过滤器的一部分。
将过滤器封装在defs元素中。有些浏览器需要这个。
DON＆＃39; T使用Illustrator导出作为样板。他们的SVG确实不是很好。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用高斯模糊的路径来模拟阴影而不是使用滤镜来实现此效果，我得到的结果是：

通过这种方式，您可以直接处理“投影”，然后只需简单的CSS就可以进行不透明度转换。

svg #shadow{
  transition: all 0.65s;
  opacity:1;
}
svg:hover #shadow{
  opacity:0;
}

完整的SVG：

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="216"
   height="216"
   id="svg3013">
  <defs
     id="defs3015">
    <filter
       x="-0.14227594"
       y="-0.13746469"
       width="1.2845519"
       height="1.2749294"
       color-interpolation-filters="sRGB"
       id="filter3826">
      <feGaussianBlur
         id="feGaussianBlur3828"
         stdDeviation="8.4688065" />
    </filter>
  </defs>
  <g
     transform="translate(0,-836.36218)"
     id="layer1">
    <path
       d="m 183.57143,107.07143 a 71.428574,73.928574 0 1 1 -142.857143,0 71.428574,73.928574 0 1 1 142.857143,0 z"
       transform="matrix(1.064,0,0,1.0280193,-11.320001,836.29069)"
       id="shadow"
       style="fill:#1a1a1a;fill-opacity:1;stroke:none;filter:url(#filter3826)" />
    <g
       transform="translate(-0.14285916,0.7142867)"
       id="g3806">
      <path
         d="m 183.57143,107.07143 a 71.428574,73.928574 0 1 1 -142.857143,0 71.428574,73.928574 0 1 1 142.857143,0 z"
         transform="matrix(1.064,0,0,1.0280193,-11.177142,835.5764)"
         id="path3021"
         style="fill:#4982cf;fill-opacity:1;stroke:none" />
      <path
         d="m 86.476396,914.53271 0,58.81194 54.094674,-27.18845 z"
         id="path3796"
         style="fill:#ffffff;stroke:none" />
    </g>
  </g>
</svg>

这里的工作示例：https://jsfiddle.net/h3s1hp3k/

使用转换时，SVG过滤器不会在悬停时消失

2 个答案: