CSS Hue-Rotate动画来过滤SVG？

Question

尝试在SVG上添加自定义Hue-Rotate过滤器来设置路径动画？

他们是否可以在SVG路径上剪辑动画背景？

<svg id="example" class="hue">
<g id="main">
<path d="....."/>
<path d="....."/>
<path d="....."/>
</g>
</svg>


/* HUE Effect */
.hue {
    -webkit-background-clip: padding-box;
    -webkit-animation: hue 60s infinite linear;
    -webkit-text-fill-color: inherit;
    color: #f35626;
    /*background-image: -webkit-linear-gradient(0deg ,#f35626 ,#feab3a);
    fill: -webkit-linear-gradient(0deg ,#f35626 ,#feab3a); */
    filter: -linear-gradient(0deg ,#f35626 ,#feab3a);
}
@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }

  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}