html - 如何将 SVG 转换(旋转)属性更改为 CSS？

Question

我从 SVG 得到了这个转换属性:

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

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

变换:旋转(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 变换属性的第二个和第三个值是旋转的位置，因此不是 Angular 。

CSS 变换通过单独的 transform-origin 属性指定旋转位置。

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