У меня есть две фигуры 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
