SVG-преобразование как свойство таблицы стилей (в отличие от CSS преобразования)

Question

Фон:

Я давно знаком с CSS 2D поворотами :

transform: rotate(45deg);

Я гораздо менее знаком с SVG 2D поворотом transforms :

transform="rotate(45, 0, 0)"

Но я точно знаю, что

• CSS 2D-поворотные преобразования используют точку 50%, 50% элемента как ось вращения; тогда как
• SVG 2D преобразование поворота использует координаты x, y, указанные во втором и третьем параметрах, в качестве оси вращения

---

Вопрос:

Когда я соединяю SVG, я обычно стараюсь избегать встроенных атрибутов и вместо этого использую CSS правила.

Я понимаю из MDN , что:

Начиная с SVG2, transform является атрибутом представления, то есть его можно использовать как свойство CSS. Однако имейте в виду, что между свойством CSS и атрибутом существует некоторая разница в синтаксисе. См. Документацию для преобразования свойства CSS для конкретного синтаксиса, который будет использоваться в этом случае.

Источник: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

Я не знаю, правильно ли я понимаю или нет.

• Я знаю, что могу объявить SVG-преобразование как атрибут элемента
• Я знаю, что могу объявить CSS transform как свойство таблицы стилей

Но могу ли я объявить SVG transform как свойство таблицы стилей в манере этих SVG -attributes-as-stylesheet-properties:

.badge {

 fill: rgb(255, 0, 0);`
 stroke: rgb(0, 0, 0);`
 stroke-width: 10;
}

ie. что-то вроде: transform: rotate(45, 0, 0)?

Или я могу только объявить CSS transform как свойство таблицы стилей при описании преобразований SVG-элементов?

Я спрашиваю только потому, что первое не работает, и я не уверен, что это я или Firefox .

Answer 1

Позвольте мне объяснить на примере нюансы и различия преобразования 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 правилами.

1. Внешняя таблица стилей В приведенных ниже примерах повторяются примеры преобразования 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>