SVG 转换为样式表属性（相对于 CSS 转换）

Question

背景：

我很熟悉 CSS 二维旋转变换:

transform: rotate(45deg);

我对 SVG 二维旋转变换不太熟悉:

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

但我确实知道

CSS 2D旋转变换使用元素的50%, 50%点作为旋转轴；而
SVG 2D 旋转变换 使用第二个和第三个参数中提供的 x, y 坐标作为旋转轴

问题：

当我将 SVG 放在一起时，我通常会尽量避免使用内联属性，而是使用 CSS 规则。

我从 MDN 了解到：

As of SVG2, transform is a presentation attribute, meaning it can be used as a CSS property. However, be aware that there are some difference in syntax between the CSS property and the attribute. See the documentation for the CSS property transform for the specific syntax to use in that case.

Source: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

不知道我理解的对不对。

我知道我可以将 SVG 变换 声明为元素内属性
我知道我可以将 CSS transform 声明为样式表属性

但是我可以按照这些 SVG-attributes-as-stylesheet-properties 的方式将 SVG transform 声明为样式表属性:

.badge {

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

ie. 类似于：transform: rotate(45, 0, 0) ?

或者在描述 SVG 元素的转换时，我是否可以仅将 CSS 转换 声明为样式表属性？

我问只是因为前者似乎不起作用，而且我不确定是我还是 Firefox。

Answer 1

让我举例说明 2D CSS 与 SVG 转换的细微差别。 SVG 使用从 SVG canvas 左上角计算的绝对坐标。

其中表示旋转中心的坐标transform="rotate(0 100 100)"，然后SVG元素将围绕它们旋转

变换="rotate(0 100 100)"
单击 SVG 后动画开始canvas强调文本

<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>

变换="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 规则很好地结合在一起。

外部样式sheet 下面的示例重复了 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>

SVG 转换为样式表属性（相对于 CSS 转换）

SVG transform as a stylesheet property (as opposed to CSS transform)

css

svg

transform

rotation

背景：

问题：

SVG 转换为样式表 属性（相对于 CSS 转换）

SVG transform as a stylesheet property (as opposed to CSS transform)

css

svg

transform

rotation

背景：

问题：

SVG 转换为样式表属性（相对于 CSS 转换）