在过滤器内动画 feDropShadow

Question

我有以下代码，我想在 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，这些属性是可动画的。

我想只使用 SVG 实现 this animation。

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

我也找不到与此相关的任何合适的文档。

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

Answer 1

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>

Answer 2

我想我使用了错误的语法。根据@Alexandr_TT 的回答。 animate 应该在 feDropShadow 之内，而不是在它之外。之后，您可以为任何可设置动画的属性.

设置动画

在过滤器内动画 feDropShadow

Animate feDropShadow inside filter

html

svg

svg-filters

svg-animate