在过滤器内部对feDropShadow进行动画处理

2024-05-20 • 问答

我有以下代码，我想在feDropShadow内为defs设置动画

@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，这些属性是可动画的。

我只想使用SVG实现this animation。

半径是动画，而不是阴影。

我也找不到与此相关的任何体面的文档。

PS； 我已经尝试过this pen，但在我的情况下不起作用。

我有以下代码，我想在里面设置feDropShadow的动画 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>

我认为我使用了错误的语法。按照@Alexandr_TT的答案。 animate应该在feDropShadow内部，而不是外部。之后，您可以为任何可设置动画的属性设置动画。

在过滤器内部对feDropShadow进行动画处理

luluyayaya 回答：在过滤器内部对feDropShadow进行动画处理

大家都在问