对 feComposite SVG 滤镜元素进行动画处理

Question

我有两个svg形状，一个在另一个之上，我已经在这两个形状上应用了feComposite 过滤器，以便顶部形状挖掉底部形状的一部分。代码如下，工作正常。

<svg width="100" height="100">
<defs>
<filter id="myfilter">
<feImage xlink:href="#layer1" result="lay1"/>
<feImage xlink:href="#layer2" result="lay2"/>
<feComposite operator="out" in="lay1" in2="lay2"/>
</filter>
</defs>   
<g filter="url(#myfilter)">
<circle id="layer1" cx="50" cy="50" r="40" stroke- 
width="0" fill="green" />
<circle id="layer2" class="small" cx="20" cy="60" r="20" stroke- 
width="0" fill="red" />
</g>
</svg>

现在我想对顶部形状进行动画处理，但是当我尝试应用动画时，两个形状都进行了动画处理，我不知道为什么，因为我只针对第二个形状class="small"。这是动画的 css 代码。

@keyframes rock {
0% {
transform: rotate(45deg);
}
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(-45deg);
}
}
.small {
animation-name: rock;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

我对这种行为感到困惑，希望有人能对这个问题有所了解。当滤镜作为一个组应用于 svg 元素时，是否无法单独对它们进行动画处理？但这似乎没有意义，因为 svg 元素可以单独定位。

这是代码笔的链接：https://codepen.io/lanlanonearth/pen/bGbRyVo

Answer 1

请尝试以下操作：您将两个圆圈放在<defs>中，然后<use xlink:href="#layer1"。接下来，将筛选器应用于<use>元素。

<svg width="100" height="100">
<defs>
<circle id="layer1" cx="50" cy="50" r="40" stroke-width="0" fill="green" />
<circle id="layer2" class="small" cx="20" cy="60" r="20" stroke-width="0" fill="red" />
<filter id="myfilter">
<feImage xlink:href="#layer1" result="lay1"/>
<feImage xlink:href="#layer2" result="lay2"/>
<feComposite operator="out" in="lay1" in2="lay2"/>
</filter>
</defs>   
<use  xlink:href="#layer1" filter="url(#myfilter)"></use>
</svg>

在代码笔上检查它