SVG element gets cut off when resized+moved

Given the following SVG embedded in a HTML page:

<!DOCTYPE html>
<html>
  <body>
    <svg style="width:100px;height:100px;border:1px solid black">
      <svg y="-25">
        <g transform="scale(2 2)">
          <circle cx="25" cy="37.5" r="25" style="fill:black" />
        </g>
      </svg>
    </svg>
  </body>
</html>

It shows a circle that is cut-off. The cut-off is influenced by the size of the outermost SVG element in both firefox and chrome. Why does this happen? How can I show the whole circle?

In the real use case for this the "circle" is much more complicated and I am trying to allowing zooming/panning for everything and have run into this problem, the above is just a simple recreation of the same problem.

2 answers

  • answered 2018-07-11 02:39 Shelvacu

    When you put an svg inside another svg element, its size defaults to the same size at its container, and will not show anything outside of that bounding box unless you set overflow:visible on the inner svg element.

    <!DOCTYPE html>
    <html>
      <body>
        <svg style="width:100px;height:100px;border:1px solid black">
          <svg y="-25" style="overflow:visible">
            <g transform="scale(2 2)">
              <circle cx="25" cy="37.5" r="25" style="fill:black" />
            </g>
          </svg>
        </svg>
      </body>
    </html>

  • answered 2018-07-11 05:20 Paul LeBeau

    The default value of overflow for outermost <svg> elements is visible. The default value of overflow for child elements of an SVG (including child <svg> elements) is hidden. This behaviour is specified in the SVG specification:

    https://www.w3.org/TR/SVG/single-page.html#masking-OverflowAndClipProperties

    That is why your circle is getting cut off. If you want the circle to be visible outside of its parent <svg> element, you have to set overflow: visible on it. Just as @Shelvacu has suggested.