logo标签列表

转换SVG滤镜

htmlcsssvgmaterial-designsvg-filters
11

我正在尝试在SVG圆形上创建类似材料设计的阴影。当您单击圆形时，我希望这个阴影能够以流畅的过渡效果增长，但目前我甚至无法确定是否可以动画化这个过渡效果，因此我希望有人能够帮助。

我已经添加了一个小例子，展示了我到目前为止所做的事情：一个带有投影的圆形，在鼠标悬停时会发生变化。我花了很长时间尝试在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 Design 提升）并增加其下面阴影的大小。

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

1个回答
5
CSS过渡和CSS动画只能在你想要动画的元素由CSS控制的情况下使用。比如，您可以使用它来动画化stroke-width。但是它的应用范围非常有限。
可以使用<animate>来动画化SVG过滤器。比如，您可以给f1的<feGaussianBlur>添加id="blur1"并使用它来进行动画处理：jsfiddle。
<animate xlink:href="#blur1" attributeName="stdDeviation"
from="10" to="30" dur="1s" begin="0s" repeatCount="indefinite"/>

begin属性理论上可以与事件绑定，比如mouseover，但实际效果可能会有所不同，因为它是与过滤任务绑定的，这并不实用。

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

只是看了一下 JSFiddle，那正是我想要的那种东西... 实际上动画需要在点击或类别更改时发生 - 但我猜这并不会让事情变得更容易？ - Ian
@RobertLongson 我只是在尝试更改这个 - 动画对象似乎并没有与特定项目“绑定”。因此，如果我将其放大并在SVG中有100个圆圈，那么我是否还需要100个动画元素？ - Ian
我修改了jsfiddle以在单击时触发SMIL。https://jsfiddle.net/kyL24uaf/1/ - Alan Tam
@AlanTam 好的，我明白了，我可以做到。有没有办法停止动画？它似乎会自动重置到模糊值为10的末尾动画？ - Ian
@Ian 要让它停留，请在<animate>中添加 fill="freeze"。https://jsfiddle.net/kyL24uaf/2/ - Alan Tam
显示剩余11条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接