Позвольте мне объяснить на примере нюансы и различия преобразования 2D CSS против SVG. SVG использует абсолютные координаты, которые рассчитываются из верхнего левого угла холста SVG.
Если указать координаты центра вращения transform="rotate(0 100 100)"
, то вокруг них будет вращаться элемент SVG
transform = "rotate (0 100 100)"
Анимация начинается после нажатия на SVG-текст, усиленный канвасом
<style>
#rectGroup {
fill: crimson;
}
</style>
<svg id="svg1" width="200" height="200" viewBox="0 0 200 200" style="border:1px solid gray;">
<g id="rectGroup">
<rect width="100px" height="50px" x="50px" y="50px" rx="10"/>
<circle cx="60px" cy="75px" r="5px" style="fill:gold;"/>
<animateTransform
attributeName="transform"
type="rotate"
begin="svg1.click"
dur="2s"
values="0 100 100;360 100 100"
repeatCount="indefinite"
/>
</g>
<circle cx="100px" cy="75px" r="5px" fill="black"/>
<circle cx="100px" cy="100px" r="5px" fill="yellowgreen"/>
<polyline points="0,75 200,75" stroke="gray" />
<polyline points="100,0 100,200" stroke="gray" />
</svg>
transform = "rotate (0 100 75)"
<style>
#rectGroup {
fill: crimson;
}
</style>
<svg id="svg1" width="200" height="200" viewBox="0 0 200 200" style="border:1px solid gray;">
<g id="rectGroup">
<rect width="100px" height="50px" x="50px" y="50px" rx="10"/>
<circle cx="60px" cy="75px" r="5px" style="fill:gold;"/>
<animateTransform
attributeName="transform"
type="rotate"
begin="svg1.click"
dur="2s"
values="0 100 75;360 100 75"
repeatCount="indefinite"
/>
</g>
<circle cx="100px" cy="75px" r="5px" fill="black"/>
<circle cx="100px" cy="100px" r="5px" fill="yellowgreen"/>
<polyline points="0,75 200,75" stroke="gray" />
<polyline points="100,0 100,200" stroke="gray" />
</svg>
В CSS, блочной модели, которая использует координаты центра вращения относительно родительского контейнера. Это избавляет нас от вычисления и указания координат точно так, как это делается в SVG, что значительно упрощает задачу.
Но главный вопрос заключался в том, можно ли использовать синтаксис SVG для его размещения в CSS правилах.
Краткий ответ - нет.
Но SVG хорошо интегрирован с CSS правилами.
- Внешняя таблица стилей В приведенных ниже примерах повторяются примеры преобразования SVG.
Поворот вокруг центра родительского контейнера
transform: rotate(135deg);
transform-origin: center;
<style>
#rectGroup {
fill: crimson;
transform: rotate(135deg);
transform-origin: center;
}
</style>
<svg width="200" height="200" viewBox="0 0 200 200" style="border:1px solid gray;">
<g id="rectGroup">
<rect width="100px" height="50px" x="50px" y="50px" rx="10"/>
<circle cx="60px" cy="75px" r="5px" style="fill:gold;"/>
</g>
<circle cx="100px" cy="75px" r="5px" fill="black"/>
<circle cx="100px" cy="100px" r="5px" fill="yellowgreen"/>
<polyline points="0,75 200,75" stroke="gray" />
<polyline points="100,0 100,200" stroke="gray" />
</svg>
Стили внутри SVG-файла
<svg id="svg1" width="200" height="200" viewBox="0 0 200 200" style="border:1px solid gray;">
<style>
#rectGroup {
fill: crimson;
transform-origin:center;
}
</style>
<g id="rectGroup" style="transform:rotate(135deg);">
<rect width="100px" height="50px" x="50px" y="50px" rx="10"/>
<circle cx="60px" cy="75px" r="5px" style="fill:gold;"/>
</g>
<circle cx="100px" cy="75px" r="5px" fill="black"/>
<circle cx="100px" cy="100px" r="5px" fill="yellowgreen"/>
<polyline points="0,75 200,75" stroke="gray" />
<polyline points="100,0 100,200" stroke="gray" />
</svg>
Стили в атрибутах представления SVG
<svg id="svg1" width="400" height="400" viewBox="0 0 200 200" style="border:1px solid gray;">
<g id="rectGroup" style="fill:crimson;transform-origin:center;transform:rotate(135deg);">
<rect width="100px" height="50px" x="50px" y="50px" rx="10"/>
<circle cx="60px" cy="75px" r="5px" style="fill:gold;"/>
</g>
<circle cx="100px" cy="75px" r="5px" fill="black"/>
<circle cx="100px" cy="100px" r="5px" fill="yellowgreen"/>
<polyline points="0,75 200,75" stroke="gray" />
<polyline points="100,0 100,200" stroke="gray" />
</svg>