Menu
I have following piece of code :
<svg> <defs> <rect id = "myRect" x = "10" y = "10" height = "120" width = "120" stroke-width = "2px" stroke = "red" fill = "blue" /> </defs> <g transform = "translate(100,30)"> <use xlink:href = "#myRect" /> </g> <g transform = "translate(100, 100) rotate(45 ? ?)"> <rect id = "myRect" x = "10" y = "10" height = "120" width = "120" stroke-width = "2px" stroke = "green" fill = "yellow" /> </g> </svg> When I translate rectangle without rotation, it is working fine. But when I rotate it, I wanted to rotate it around its center axis point. What should I need to pass to rotate attribute?
231
Rotations always happen around 0,0. In order to rotate around the center of the object you need to move the points so the center of the object is at 0,0; then rotate them; then afterwards move them back again: So if cx and cy are your center: p1.
Just use the element type selector and add the transform: rotate(180deg) property to it like in the below snippet. Show activity on this post. Inline you would do it like this: x-axis flip : transform="scale(-1 1)"
When using an SVG transform attribute, the element and its system of coordinates are simply rotated around the point specified by the second and third arguments of the rotate() function, a point whose coordinates we've computed so that it's situated at the 50% 50% point of the element.
You would have to set the center as the center of the filled element. Like this:
svg .rotate { transform-box: fill-box; transform-origin: center; transform: rotate(45deg); } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
