'SVG rotate inside SVG

I'm working on a project that requires to export an SVG image (map) with symbols (also SVGs). I have found a simple library that helps me to do the export to PDF quite simply.

The way it is structures is basically like that.

svg (main svg area 9600x5060) -svg symbols (placed via x,y coordinates inside of 9600x5060) -svg symbols (placed via x,y coordinates inside of 9600x5060) ..... svg

So far everything works great!!

Now some of the symbols/icons need to be rotated (90, 180, 45, etc..).

Here is the main issue, the pivot point of each symbol seems to be 0, 0 from the parent svg, hope it makes sense when I say that.

Hope someone can help me and maybe it is not possible, I have not a whole lot of experience in SVG and it seems to behave a little different that other html elements.

I have tested a small snipped for demo:

.green {
  fill: none;
  stroke: green;
  transform: rotate(20deg);
}
<html>

<body>

  <h1>My first SVG</h1>

  <svg height="600" width="800" style="background-color:#cccccc;">

      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 50" width="100" height="100" x="200" y="100" class="green">
        <g>
          <path class="a" d="M35.76,23.45a8.34,8.34,0,1,0-8.34,8.33A8.34,8.34,0,0,0,35.76,23.45Z" />
          <line class="a" x1="24.42" y1="15.68" x2="24.42" y2="43.8" />
          <line class="a" x1="30.42" y1="15.68" x2="30.42" y2="43.8" />
        </g>
      </svg>
  </svg>

</body>

</html>
phphtmlsvgrotationtagsc#sqliteentity-frameworkado.netrelational-database


Solution 1:[1]

You can use transform-origin property but I know it gets a little wonky with SVGs on different browsers. By applying the class to the <g> instead of inside the SVG it seems to be consistent across FF and Chrome as far as positioning and rotation. Let me know if that works for you or we can troubleshoot it further.

.green {
  fill: none;
  stroke: green;
  transform: rotate(45deg);
  transform-origin: center;
}
<html>

<body>

  <h1>My first SVG</h1>

  <svg height="600" width="800" style="background-color:#cccccc;">

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 50" width="100" height="100" x="200" y="100">
      <g class="green">
        <path class="a" d="M35.76,23.45a8.34,8.34,0,1,0-8.34,8.33A8.34,8.34,0,0,0,35.76,23.45Z"/>
        <line class="a" x1="24.42" y1="15.68" x2="24.42" y2="43.8"/>
        <line class="a" x1="30.42" y1="15.68" x2="30.42" y2="43.8"/>
      </g>
    </svg>
  </svg>

</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 AStombaugh

Related Questions