html - 过渡 SVG 过滤器

Question

我正在尝试在 SVG 圆圈上创建类似阴影的 Material 设计。当你点击圆圈时，我希望这个阴影随着一个漂亮的过渡而增长，但目前我正在努力弄清楚是否有可能为这个过渡设置动画，所以我希望有人能提供帮助。

我已经添加了一个小例子来说明我目前所获得的内容，一个带有阴影的圆圈，它会在鼠标悬停时发生变化。我花了很长时间尝试在 CSS 中制作阴影，但得出的结论是我认为现在不可能。

虽然我已经有了阴影，但我找不到让它们动起来的方法。我找到了一些使用单个属性的动画标签的示例(例如圆的颜色)，并找到了使用关键帧进行 CSS 过渡的示例，但在这里我想修改实际的过滤器本身。这是否可能，有人可以说明您如何实现这一目标 - 理想情况下，我正在尝试实现 IE10/FF/Chrome 兼容性，所以我想知道该解决方案是否有任何复杂性？

circle {
    fill: #8BC34A;
    stroke: white;
    stroke-width: 2px;
    filter: url(#f1);
    transition: 2s ease;
}

circle:hover {
    filter: url(#f2);
    transition: 2s ease;
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" viewPort="0 0 200 200">
  <defs>
    <filter id="f1" x="-40%" y="-40%" height="200%" width="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="0" dy="0" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
    <filter id="f2" x="-40%" y="-40%" height="200%" width="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="0" dy="0" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="30" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <circle r="100" cx="150" cy="150" />
</svg>

更新

在尝试了一些事情之后，我将一些例子放在一起，尽管它们都不是我想要的。我需要能够在单个/多个元素(而不是 SVG 中的每个圆圈)上切换过渡，为此我可能有数百个。我最终还想改变圆圈的大小(根据 Material 设计提升)，然后增加下面阴影的一侧。

/*************************/
/* JavaScript Animations */
/*************************/
(function() { 
    var svg = d3.select("#svg_javaScriptAnimation");
    setInterval(function() {
        
        // Animate
        svg.selectAll(".circle")
           .transition()
           .duration(1950)
           .attr("r", 130);
        
        svg.selectAll(".jA_shadow")
           .transition()
           .duration(1950)
           .attr("r", 130);
        
         svg.selectAll(".jA_shadow_expanding")
           .transition()
           .duration(1950)
           .attr("r", 140);
        
        svg.selectAll(".jA_shadow_large")
           .transition()
           .duration(1950)
           .attr("r", 110);
        
        // Reset
         svg.selectAll(".circle")
           .transition()
           .delay(1960)
           .duration(1)
           .attr("r", 110);
        
         svg.selectAll(".jA_shadow")
           .transition()
           .delay(1960)
           .duration(1)
           .attr("r", 110);
        
         svg.selectAll(".jA_shadow_expanding")
           .transition()
           .delay(1960)
           .duration(1)
           .attr("r", 110);
        
        svg.selectAll(".jA_shadow_large")
           .transition()
           .delay(1960)
           .duration(1)
           .attr("r", 80);
    }, 2000);
})();

circle {
   fill: #8BC34A;
   stroke: white;
   stroke-width: 2px;
}

text {
    fill: white;
}

/*****************/
/* CSS KeyFrames */
/*****************/
#svg_keyframes{
  animation:filters 2s infinite;
}

@-webkit-keyframes filters {
  0%{ 
    -webkit-filter:drop-shadow(0px 16px 10px #333); 
  }
  100% { 
    -webkit-filter:drop-shadow(0px 16px 30px #333); 
  }
}

/***********************************/
/* CSS KeyFrames using SVG Filters */
/***********************************/

.kf_Shadow1 {
    -webkit-animation-name: shadow-expand; / Chrome, Safari, Opera /
    -webkit-animation-duration: 2s; / Chrome, Safari, Opera /
    -webkit-animation-iteration-count: infinite;
    animation-name: shadow-expand;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.kf_Fill1 {
    -webkit-animation-name: circle-fill; / Chrome, Safari, Opera /
    -webkit-animation-duration: 2s; / Chrome, Safari, Opera /
    -webkit-animation-iteration-count: infinite;
    animation-name: circle-fill;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.kf_DropShadow1 {
    -webkit-animation-name: drop-shadow-expand; / Chrome, Safari, Opera /
    -webkit-animation-duration: 2s; / Chrome, Safari, Opera /
    -webkit-animation-iteration-count: infinite;
    animation-name: drop-shadow-expand;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

/* Demonstrate that fill works correctly */
@keyframes circle-fill {
    0% { fill: #FF0000; }       
    25% { fill: #BB0033; }       
    50% { fill: #990066; }        
    75% { fill: #4400aa; }         
    100% { fill: #0000ff; }       
}

/* Demonstrate that filter doesn't work as hoped */
@keyframes shadow-expand {
    0% { filter: url(#f1); -webkit-filter: url(#f1);}       
    25% { filter: url(#f2); -webkit-filter: url(#f1);}       
    50% { filter: url(#f3); -webkit-filter: url(#f1);}       
    75% { filter: url(#f4); -webkit-filter: url(#f1);}       
    100% { filter: url(#f5); -webkit-filter: url(#f1);}       
}

@keyframes drop-shadow-expand {
    0% { -webkit-filter:drop-shadow(0px 16px 10px #333); }       
    25% { -webkit-filter:drop-shadow(0px 16px 15px #333); }       
    50% { -webkit-filter:drop-shadow(0px 16px 20px #333); }       
    75% { -webkit-filter:drop-shadow(0px 16px 25px #333); }       
    100% { -webkit-filter:drop-shadow(0px 16px 30px #333); }       
}

/*************************/
/* SVG Filter Animations */
/*************************/

.fA_shadow {
  filter: url(#f1);
}

/*************************/
/* JavaScript Animations */
/*************************/
.jA_shadow {
    filter: url(#f1);
    stroke: none !important;
}

.jA_shadow_expanding {
    filter: url(#f1);
    stroke: none !important;
    fill: #CCC !important;
}

.jA_shadow_large {
    filter: url(#f2);
     stroke: none !important;
    fill: #CCC !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<h1>CSS Keyframes</h1>
<p>The downside here is that the animation seems to require attaching to the svg element, which causes all of the circles to animate their drop shadows</p>
<svg id="svg_keyframes" width="1000" height="280">
    <g transform="translate(120, 140)">
        <circle r="110"/>
        <text dx="-1.5em">Circle 1</text>
    </g>
    <g transform="translate(420, 140)">
        <circle r="110"/>
        <text dx="-1.5em">Circle 2</text>
    </g>
</svg>


<h1>CSS Keyframes referencing SVG Filters</h1>
<p>Unfortunately it seems that this approach simply doesn't work. The idea was that the class would change triggering a keyframe which would progressively change the filter being applied by specifying gradually expanding filters</p>
<svg id="svg_filterKeyFrames" width="1000" height="280">
    <defs>
        <filter id="f1" x="-40%" y="-40%" height="200%" width="200%">
            <feOffset result="offOut" in="SourceAlpha" dx="0" dy="4" />
            <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
        <filter id="f2" x="-40%" y="-40%" height="200%" width="200%">
            <feOffset result="offOut" in="SourceAlpha" dx="0" dy="7" />
            <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="15" />
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
         <filter id="f3" x="-40%" y="-40%" height="200%" width="200%">
            <feOffset result="offOut" in="SourceAlpha" dx="0" dy="10" />
            <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="20" />
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
         <filter id="f4" x="-40%" y="-40%" height="200%" width="200%">
            <feOffset result="offOut" in="SourceAlpha" dx="0" dy="13" />
            <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="25" />
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
         <filter id="f5" x="-40%" y="-40%" height="200%" width="200%">
            <feOffset result="offOut" in="SourceAlpha" dx="0" dy="16" />
            <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="30" />
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
    </defs>
     <g transform="translate(120, 140)">
        <circle class="kf_Shadow1" r="110"/>
        <text dx="-4.5em">Shadow should change</text>
    </g>
    <g transform="translate(420, 140)">
        <circle class="kf_Fill1" r="110"/>
        <text dx="-4.5em">Colour should change</text>
    </g>
     <g transform="translate(720, 140)">
        <circle class="kf_DropShadow1" r="110"/>
        <text dx="-5.5em">Drop Shadow should change</text>
    </g>
</svg>

<h1>SVG Filters Animations</h1>
<p>SVG filter animations are another way to tackle this problem, but it seems that they behave very similar to a CSS filter in that because they are shared all of the elements update</p>
<svg id="svg_filterAnimation" width="1000" height="280">
    <defs>
        <filter id="f1" x="-40%" y="-40%" height="200%" width="200%">
            <feOffset result="offOut" in="SourceAlpha" dx="0" dy="4" />
            <feGaussianBlur id="blur1" result="blurOut" in="matrixOut" stdDeviation="10" />
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
    </defs>
     <g transform="translate(120, 140)">
        <circle class="fA_shadow" r="110"/>
        <text dx="-1.5em">Circle 1</text>
    </g>
     <g transform="translate(420, 140)">
        <circle class="fA_shadow" r="110"/>
        <text dx="-1.5em">Circle 2</text>
    </g>
    <animate xlink:href="#blur1" attributeName="stdDeviation" from="10" to="30" dur="2s" begin="0s" repeatCount="indefinite"/>
</svg>

<h1>JavaScript Animations</h1>
<p>Animation via JavaScript is another approach, this uses D3 but the issue here is changing the size of gaussian blur that operates on the shadow is incredibly difficult as demonstrated in Circle 2</p>
<svg id="svg_javaScriptAnimation" width="1000" height="280">
    <defs>
        <filter id="f1" x="-40%" y="-40%" height="200%" width="200%">
            <feOffset result="offOut" in="SourceAlpha" dx="0" dy="4" />
            <feGaussianBlur id="blur1" result="blurOut" in="matrixOut" stdDeviation="10" />
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
         <filter id="f2" x="-40%" y="-40%" height="200%" width="200%">
            <feOffset result="offOut" in="SourceAlpha" dx="0" dy="4" />
            <feGaussianBlur id="blur1" result="blurOut" in="matrixOut" stdDeviation="30" />
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
    </defs>
     <g transform="translate(120, 140)">
        <circle class="jA_shadow" r="110"/>
        <circle class="circle" r="110"/>
        <text dx="-1.5em">Circle 1</text>
    </g>
     <g transform="translate(420, 140)">
        <circle class="jA_shadow_expanding" r="110"/>
        <circle class="circle" r="110"/>
        <text dx="-1.5em">Circle 2</text>
    </g>
     <g transform="translate(720, 140)">
        <circle class="jA_shadow_large" r="80"/>
        <circle class="circle" r="110"/>
        <text dx="-1.5em">Circle 3</text>
    </g>
    <animate xlink:href="#blur1" attributeName="stdDeviation" from="10" to="30" dur="2s" begin="0s" repeatCount="indefinite"/>
</svg>

Answer 1

CSS transition 和 CSS animation 只能用在你想要的动画是由 CSS 控制的情况下。比如说，如果你想制作动画，你可以使用它 stroke-width .但它非常有限。

可以使用 <animate>动画 SVG 滤镜。比如说，你可以添加一个 id="blur1"至 <feGaussianBlur>的 f1并用它来制作动画:jsfiddle

<animate xlink:href="#blur1" attributeName="stdDeviation"
from="10" to="30" dur="1s" begin="0s" repeatCount="indefinite"/>

begin属性理论上可以绑定(bind)到一个事件，比如 mouseover ，但你的里程可能会有所不同，因为它绑定(bind)到过滤任务，这根本没有用。

第三种选择是使用 JavaScript 对其进行动画处理 requestAnimationFrame .您将需要编写大量代码，而且不会使用 GPU 加速，但您总能得到想要的。