Почему элементы появляются за пределами окна просмотра вложенного элемента svg?

Question

В этом примере:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" viewBox="0 0 400 400">
    <svg viewBox="0 0 400 100" y="20" width="400">
        <rect x="0" y="-100" width="79" height="100" fill="#ff0000"></rect>
    </svg>
    <rect x="100" y="0" width="79" height="400" fill="#ff0000"></rect>
</svg>

Внутренний rect с y = -100 не обрезается, несмотря на то, что внутренний svg имеет окно просмотра min-y = 0.

Почему?

Answer 1

В следующем примере я рисую вложенный svg, который точно так же, как в вашем примере, имеет viewBox="0 0 400 100" и ширину, но без высоты . Я добавляю preserveAspectRatio="none", чтобы содержимое этого элемента svg масштабировалось неоднородно. Внутри этого вложенного элемента svg я рисую прямоугольник того же размера, что и viewBox: <rect width="400" height="100" fill="rgba(0,0,0,.5)">

Обратите внимание, что прямоугольник растянут (потому что preserveAspectRatio="none") до высоты 400 единиц. Очевидно, вложенный svg без объявленной высоты примет высоту родительского svg.

.root{outline:solid; overflow:visible;}

<svg class="root"  viewBox="0 0 400 400" width="200">
    <svg viewBox="0 0 400 100" y="20" width="400" height="100">
        <rect width="400" height="100" fill="rgba(0,0,0,.5)">
          <!--a rect with the size of the svg parent-->
        </rect>
        <rect x="0" y="-100" width="79" height="400" fill="rgba(255,0,0,.5)"></rect>
    </svg>
    <rect x="100" y="0" width="79" height="400" fill="#ff0000"></rect>
</svg>

Это ваш пример, где я добавил высоту во вложенный SVG и прямоугольник того же размера, что и viewBox:

.root{outline:solid; overflow:visible;}

<svg class="root"  viewBox="0 0 400 400" width="200">
    <svg viewBox="0 0 400 100" y="20" width="400" preserveAspectRatio="none">
        <rect width="400" height="100" fill="rgba(0,0,0,.5)">
          <!--a rect with the size of the svg parent-->
        </rect>
  </svg>
</svg>  

Answer 2

viewBox элемента svg не обрезает содержимое, а просто устанавливает sh систему координат 1

Чтобы фактически обрезать содержимое, атрибут clip-path имеет будет использоваться.