我有以下代码,我想在 defs
中为 feDropShadow
制作动画
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap");
*,
*::before,
*::after {
box-sizing: border-box;
position: relative;
}
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
font-family: "Open Sans", sans-serif;
}
:root {
--easing: cubic-bezier(0.87, 0.08, 0.23, 0.91);
--duration: 0.3s;
--pink: #770946;
}
#app {
height: 100vh;
width: 100%;
background: #1e0238;
position: relative;
overflow: hidden;
}
.circle-pink {
transform: scale(1);
fill: none;
stroke: var(--pink);
stroke-width: 6;
}
.circle-fill {
transform: scale(1);
transform-origin: center center;
fill: var(--pink);
stroke: none;
stroke-width: 0;
filter: url(#shadow);
}
<div id='app'>
<svg viewBox="0 0 100 100">
<defs>
<filter id="shadow">
<feDropShadow id="shadow-appear" dx="-0.4" dy="0.4" stdDeviation="0.2" flood-opacity="0.25" />
</filter>
<animate xlink:href="shadow-appear" attributeName="dx" values="0;-0.4;0" dur="3s" />
<animate xlink:href="shadow-appear" attributeName="dy" values="0;0.4;0" dur="3s" />
</defs>
<circle cx="50" cy="25" r="45" class="circle-pink" />
<circle cx="50" cy="25" r="40" class="circle-pink" />
<circle cx="50" cy="25" r="35" class="circle-pink" />
<circle cx="50" cy="25" r="30" class="circle-pink" />
<circle cx="50" cy="25" r="25" class="circle-pink" />
<circle cx="50" cy="25" r="20" class="circle-pink" />
<circle cx="50" cy="25" r="18" class="circle-pink circle-fill">
<animate attributeName="r" values="18;20;18" dur="3s" repeatCount="indefinite" />
</circle>
</svg>
</div>
根据 MDN docs ,这些属性是可动画的。
我要实现this animation仅使用 SVG。
半径是动画的,但不是阴影。
我也找不到与此相关的任何合适的文档。
PS; 我已经试过了this pen它在我的案例中不起作用。
最佳答案
I have the following code and I want to animate feDropShadow inside
defs
要为 feDropShadow 滤镜设置动画,请使用 stdDeviation 属性
<feDropShadow id="shadow-appear" dx="-0.4" dy="0.4" stdDeviation="0" flood-opacity="0.25" >
<animate attributeName="stdDeviation" values="0;4;0" dur="2s"
repeatCount="indefinite" />
</feDropShadow>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap");
*,
*::before,
*::after {
box-sizing: border-box;
position: relative;
}
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
font-family: "Open Sans", sans-serif;
}
:root {
--easing: cubic-bezier(0.87, 0.08, 0.23, 0.91);
--duration: 0.3s;
--pink: #770946;
}
#app {
height: 100vh;
width: 100%;
background: #340362;
position: relative;
overflow: hidden;
}
.circle-pink {
transform: scale(1);
fill: none;
stroke: var(--pink);
stroke-width: 6;
}
.circle-fill {
transform: scale(1);
transform-origin: center center;
fill: var(--pink);
stroke: none;
stroke-width: 0;
filter: url(#shadow);
}
<div id='app'>
<svg width="400" height="400" viewBox="0 -25 100 100">
<defs>
<filter id="shadow">
<feDropShadow id="shadow-appear" dx="-0.4" dy="0.4" stdDeviation="0" flood-opacity="0.25" >
<animate attributeName="stdDeviation" values="0;4;0" dur="2s" repeatCount="indefinite" />
</feDropShadow>
</filter>
<animate xlink:href="#shadow-appear" attributeName="dx" values="0;-0.4;0" dur="2s" />
<animate xlink:href="#shadow-appear" attributeName="dy" values="0;0.4;0" dur="2s" />
</defs>
<circle cx="50" cy="25" r="45" class="circle-pink" />
<circle cx="50" cy="25" r="40" class="circle-pink" />
<circle cx="50" cy="25" r="35" class="circle-pink" />
<circle cx="50" cy="25" r="30" class="circle-pink" />
<circle cx="50" cy="25" r="25" class="circle-pink" />
<circle cx="50" cy="25" r="20" class="circle-pink" />
<circle cx="50" cy="25" r="18" class="circle-pink circle-fill" >
</circle>
</svg>
</div>
关于html - 在过滤器内动画 feDropShadow,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60819630/