如何将SVG转换(旋转)属性更改为CSS?

Question

我从SVG那里得到了这个转换属性：

transform="rotate(15.331623, 679.50173, 211.39806)"

然后我尝试将其作为替代品，但它不起作用。

transform: rotate(15.331623deg, 679.50173deg, 211.39806deg)

从上面的代码中，浏览器给了我一个错误Invalid property value.如何使用 CSS 实现此目的？

这是 SVG 的示例代码

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="svg1369"
width="289.13361"
height="281.64835">
<g
transform="rotate(36.765794,489.48582,-457.27544)"
id="g5384-3">
<g
id="g5217-6">
<path
inkscape:connector-curvature="0"
id="path198-6-7"
style="opacity:0.1;isolation:isolate;mix-blend-mode:darken;fill:#231f20"
d="m 691.89441,148.35857 7.87141,19.66707 6.59397,16.4721 0.84011,107.96654 0.0447,5.95194 a 21.51,21.51 0 0 1 -0.26518,3.60192 l -24.83847,19.16058 -47.60875,0.41562 -103.55223,0.83225 -5.93791,0.0465 -21.47201,0.14518 -4.50999,0.0311 -31.96312,0.28145 -5.63546,0.0784 -6.14063,-15.34415 -6.23361,-15.5629 -20.64084,-51.54485 c -0.18233,-0.46557 -0.38118,-0.96892 -0.50311,-1.4053 l -0.11857,-13.61155 -0.42391,-54.11922 a 22.57,22.57 0 0 1 22.38558,-22.74964 l 150.44158,-1.19811 21.86587,-0.15852 61.27829,-0.54099 0.086,-0.003 a 22.25,22.25 0 0 1 8.43632,1.58775 z" />
</g>
</g>
</svg>

Answer 1

SVG 变换属性的第二个和第三个值是要旋转的位置，因此不是角度。

CSS 转换通过单独的转换源属性指定旋转位置。

#g5384-3 {
transform: rotate(36.765794deg);
transform-origin: 489.48582px -457.27544px;
}

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="svg1369"
width="289.13361"
height="281.64835">
<g id="g5384-3">
<g
id="g5217-6">
<path
inkscape:connector-curvature="0"
id="path198-6-7"
style="opacity:0.1;isolation:isolate;mix-blend-mode:darken;fill:#231f20"
d="m 691.89441,148.35857 7.87141,19.66707 6.59397,16.4721 0.84011,107.96654 0.0447,5.95194 a 21.51,21.51 0 0 1 -0.26518,3.60192 l -24.83847,19.16058 -47.60875,0.41562 -103.55223,0.83225 -5.93791,0.0465 -21.47201,0.14518 -4.50999,0.0311 -31.96312,0.28145 -5.63546,0.0784 -6.14063,-15.34415 -6.23361,-15.5629 -20.64084,-51.54485 c -0.18233,-0.46557 -0.38118,-0.96892 -0.50311,-1.4053 l -0.11857,-13.61155 -0.42391,-54.11922 a 22.57,22.57 0 0 1 22.38558,-22.74964 l 150.44158,-1.19811 21.86587,-0.15852 61.27829,-0.54099 0.086,-0.003 a 22.25,22.25 0 0 1 8.43632,1.58775 z" />
</g>
</g>
</svg>