动画 feComposite SVG 过滤器元素答案

【问题标题】：Animating feComposite SVG filter elements动画 feComposite SVG 过滤器元素
【发布时间】：2020-01-03 08:28:10
【问题描述】：

我有两个 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 元素可以单独定位。

这里是codepen的链接：https://codepen.io/lanlanonearth/pen/bGbRyVo

【问题讨论】：

标签： css animation svg composite porter-duff

【解决方案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

【讨论】：

哇！谢谢！！！我仍然需要思考这背后的逻辑，但非常感谢你拯救了这一天！