动画 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 元素可以单独定位。

这里是 link 代码笔：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>

Check it on codepen

动画 feComposite SVG 过滤器元素

Animating feComposite SVG filter elements

css

animation

svg

composite

porter-duff