SVG视图框溢出：隐藏/裁剪

有没有办法使

视图框之外的任何内容不可见？就好像
viewBox
本身是一个带有
overflow:hidden

在中，您可以看到以蓝色突出显示的
视图框

<svg width="100%" height="100%" viewBox="0 0 800 100">
    <rect width="100%" height="100%" fill="none" stroke="blue" />
    <text y="10" x="10%" width="10%" height="200%" fill="#000" font-size="30" >
        Only the part inside the viewBox should be visible
    </text>
</svg>


只有视图框内的零件才可见

您可以将矩形用作
：

看起来您可以直接在
svg
标记上使用
clip path=“url（#clip）”
，因此不需要额外的
g
标记。@bfred。这在Edge/IE中似乎并不总是有效。有什么建议吗？
<defs>
    <rect id="rect" width="100%" height="100%" fill="none" stroke="blue" />
    <clipPath id="clip">
        <use xlink:href="#rect"/>
    </clipPath>
</defs>

<g clip-path="url(#clip)">
    <text y="10" x="10%" width="10%" height="200%" fill="#000" font-size="30">Only the part inside the viewBox should be visible</text>
</g>

<use xlink:href="#rect"/>