How do you set a reference point in a nested SVG?

Question

I would like to change the reference point in SVG. I have a nested SVG in another SVG. I would like the reference point to be in the middle.

html,body {
 height:100%;
 margin:0;
}

<svg style="width:100%;height:100%" xmlns="http://www.w3.org/2000/svg">
      <g>
        <svg x="30" y="200" style="width:100%;height:100%">
          <rect x="3" y="0" width="1" height="68" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="7" y="0" width="1" height="68" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="0" y="71" width="11" height="9" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="3" y="83" width="1" height="68" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="7" y="83" width="1" height="68" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="4" y="61" width="3" height="30" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="1.5" y="60" width="8" height="1" style="stroke-width:0.5;stroke:black;fill:none" />
        </svg>
</g>
</svg>

At the moment, the internal SVG has a point in the upper left corner. Variables X and Y specify the distance to this point.

Related - https://stackoverflow.com/questions/6711610/how-to-set-transform-origin-in-svg — Paulie_D, Jan 15 '19 at 14:41

score 1 · Answer 1 · answered Jan 15 '19 at 15:41

I gave your nested svg a viewBox attribute. This is putting your drawing in the center of the main svg. Next I wrapped everything in a <g> element and translate it transform="translate(5.5, 75.5)". Please note that 5.5 is half width (viewBox = "0 0 11 151") and 75.5 is half height (viewBox = "0 0 11 151")

To calculate the value for the viewBox I'm using the method getBBox(). In this case you can try console.log(inner.getBBox()).

svg{border:1px solid}
html,body{height:100vh}

<svg style="width:100%;height:100%" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50%" cy="50%" r="5" fill="red" />
      <g>
        <svg viewBox = "0 0 11 151"  style="width:100%;height:100%" >
          <g id="inner" transform="translate(5.5, 75.5)">
          <rect x="3" y="0" width="1" height="68" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="7" y="0" width="1" height="68" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="0" y="71" width="11" height="9" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="3" y="83" width="1" height="68" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="7" y="83" width="1" height="68" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="4" y="61" width="3" height="30" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="1.5" y="60" width="8" height="1" style="stroke-width:0.5;stroke:black;fill:none" />
          </g>
        </svg>
</g>
</svg>

The red point marks the center of the main svg.

score 0 · Answer 2 · answered Jan 15 '19 at 14:36

You can apply a translation on the g to move the reference point to the middle:

html,
body {
  height: 100%;
  margin: 0;
  background: linear-gradient(red, red) center/10px 10px no-repeat;/*the middle*/
}

g {
  transform: translate(50%, 50%);
}

svg {
  display: block
}

<svg style="width:100%;height:100%" xmlns="http://www.w3.org/2000/svg">
      <g>
        <svg x="0" y="0" style="width:100%;height:100%">
          <rect x="3" y="0" width="1" height="68" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="7" y="0" width="1" height="68" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="0" y="71" width="11" height="9" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="3" y="83" width="1" height="68" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="7" y="83" width="1" height="68" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="4" y="61" width="3" height="30" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="1.5" y="60" width="8" height="1" style="stroke-width:0.5;stroke:black;fill:none" />
        </svg>
</g>
</svg>

How do you set a reference point in a nested SVG?

2 Answers2