Content of nested SVGs is not clipped by the nested SVG's size

[fskpf]

Test case:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd"[]>
<svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-root" width="480" height="360" viewBox="0 0 480 360">
  <g id="test-body-content">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="lowerRight" viewBox="0 0 140 180" x="240" y="180" width="140" height="180">
      <rect x="0" y="0" width="240" height="180" fill="red" />
	  <text x="10" y="50" font-size="32">test test test test</text>
    </svg>
  </g>
  <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000" />
</svg>

If the children of a nested SVG extend the width/height of their SVG root, they should basically be clipped by the size of the SVG. This is currently not considered at all.

[ygra]

Isn't this governed by CSS overflow? Yep:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd"[]>
<svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-root" width="480" height="360" viewBox="0 0 480 360">
  <g id="test-body-content">
    <svg viewBox="0 0 140 50" x="0" y="0" width="140" height="50">
      <rect x="0" y="0" width="240" height="70" fill="red" />
	  <text x="10" y="30" font-size="32">no overflow specified</text>
    </svg>
    <svg viewBox="0 0 140 50" x="0" y="70" width="140" height="50" style="overflow: visible;">
      <rect x="0" y="0" width="240" height="70" fill="cornflowerblue" />
	  <text x="10" y="30" font-size="32">overflow: visible</text>
    </svg>
    <svg viewBox="0 0 140 50" x="0" y="140" width="140" height="50" style="overflow: hidden">
      <rect x="0" y="0" width="240" height="70" fill="red" />
	  <text x="10" y="30" font-size="32">overflow: hidden</text>
    </svg>
    <svg viewBox="0 0 140 50" x="0" y="210" width="140" height="50" style="overflow: auto">
      <rect x="0" y="0" width="240" height="70" fill="cornflowerblue" />
	  <text x="10" y="30" font-size="32">overflow: auto</text>
    </svg>
    <svg viewBox="0 0 140 50" x="0" y="280" width="140" height="50" style="overflow: scroll">
      <rect x="0" y="0" width="240" height="70" fill="red" />
	  <text x="10" y="30" font-size="32">overflow: scroll</text>
    </svg>  </g>
  <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000" />
</svg>

overflow-x and overflow-y didn't seem to have a distinction. Could be that there is none in SVG, as opposed to HTML.

Also haven't tested inherit, that would probably require deeper nesting to see a useful effect.

[ygra]

• https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/overflow
• https://www.w3.org/TR/SVG11/masking.html#OverflowProperty