How to change SVG transform (rotate) attribute into CSS? - html

Question

I got this transform attribute from SVG:
transform="rotate(15.331623, 679.50173, 211.39806)"
And then I tried this as a replacement but it does not work.
transform: rotate(15.331623deg, 679.50173deg, 211.39806deg)
From the code above, the browser gives me an error Invalid property value. How do I achieve this using CSS?
This is the sample code of the 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

The SVG transform attribute's second and third values are a location to rotate around and as such are not angles.
CSS transforms specify the rotation location via the separate transform-origin property.
#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>