Предположим, у меня есть svg, созданный с помощью inkscape.
В этом наборе SVG с окном просмотра я хочу анимировать каждый элемент внутри SVG.
Нет проблем с переводом или непрозрачностью ... но когда мне нужно повернуть или масштабировать отдельный элемент, это ведет себя странно.
Я пытаюсь правильно понять концепцию окна просмотра, но мне нужна помощь.
Я понимаю, что у меня есть только одна исходная точка, когда у меня есть только одна панель просмотра, я должен установить несколько панелей просмотра?
<?xml version="1.0" encoding="UTF-8"?>
<svg id="SVGRoot" version="1.1" viewBox="0 0 700 500" xmlns="http://www.w3.org/2000/svg">
// rotate or scale acting weird
<ellipse id="path9238" cx="332.91" cy="143.85" rx="64.941" ry="67.676" style="fill-rule:evenodd;fill:#f00;stroke:#000"/>
// rotate or scale acting weird
<rect id="rect9240" x="400.59" y="270.31" width="173.63" height="177.73" style="fill-rule:evenodd;fill:#f00;paint-order:normal"/>
// rotate or scale acting weird
<path id="path9242" d="m233.79 453.52-153.64-138.25 196.55-63.937z" style="fill-rule:evenodd;fill:#f00;paint-order:normal"/>
</svg>
Я использую anime.js 3.0 или CSS, или я могу попробовать что-нибудь еще