05-09-2018 06:52
05-09-2018 06:52
Hi guys -
I have the following image within a <g> container within a nested <svg> image. I am trying to rotate the "arrow.png" image around its center (how much it rotates is dynamic based on a calculation). This code below is rotating the image from the nested <svg>'s origin, moving the center of the image to the left.
How do I set the rotation axis? I tried setting the transform-origin attribute on the <g> container but I'm getting an error.
<svg>
<other stuff>
<svg x="70%" y="60%" width="15%" height="15%"> <g transform-origin="50% 50%" transform="rotate(45)"> <image href="arrow.png" class="arrow" load="sync" /> </g> </svg>
</svg>
Answered! Go to the Best Answer.
05-09-2018 11:11
05-09-2018 11:11
Hi Peperez,
I think you can add an additional transform="translate(50%,50%)" for this purpose.
This would have same effect. You only need to offset back your image by half it's size first.
eg:
<svg class="background">
<rect x="50%" y="50%" width="60" height="60" fill="gray" />
<svg x="50%" y="50%" width="60" height="60">
<g transform="rotate(180)" transform="translate(50%,50%)">
<image x="-30" y="-30" href="ArrowTest3.png" width="60" height="60" class="arrow" load="sync" />
</g>
</svg>
</svg>
Rotating the image will keep it in the gray square, I guess this it what you wanted to achieve.
05-09-2018 09:32
05-09-2018 09:32
I should also mention that I get an error (invalid int) when I try to do rotate(45 30 30) which works when rotating <g> containers on most browsers.
FYI - my image is 60x60, which is why I would want to rotate around point (30,30).
05-09-2018 11:11
05-09-2018 11:11
Hi Peperez,
I think you can add an additional transform="translate(50%,50%)" for this purpose.
This would have same effect. You only need to offset back your image by half it's size first.
eg:
<svg class="background">
<rect x="50%" y="50%" width="60" height="60" fill="gray" />
<svg x="50%" y="50%" width="60" height="60">
<g transform="rotate(180)" transform="translate(50%,50%)">
<image x="-30" y="-30" href="ArrowTest3.png" width="60" height="60" class="arrow" load="sync" />
</g>
</svg>
</svg>
Rotating the image will keep it in the gray square, I guess this it what you wanted to achieve.
05-10-2018 07:39
05-10-2018 07:39
Thanks @redshifteric!
That definitely fixed the issue. I thought there would be a more elegant way of doing it with setting the transform-origin attribute as I've done on browsers before, but this works and that's all I need!
Does anyone else know if there is a plan to support the transform-origin in the future? Definitely a good crutch to use for more complex transformations on shapes.