Can I change the transform-origin of nested SVG?

[peperez]

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>

[peperez]

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).

[redshifteric · Accepted solution]

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.

[peperez]

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.