我正在尝试在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>
<animate>
中添加fill="freeze"
。https://jsfiddle.net/kyL24uaf/2/ - Alan Tam