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>

内部svg具有视图框rect的情况下，内部y = -100和min-y = 0不会被裁剪。

那是为什么？

Answer 1

svg元素的

viewBox不会剪切内容，它只是建立坐标系1

要实际剪切内容，必须使用clip-path属性。

Answer 2

在下一个示例中，我绘制了一个嵌套的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>

为什么元素会出现在嵌套svg元素的视图框之外？

2 个答案: