SVG视图溢出:隐藏/裁剪

Question

有没有办法在viewBox隐形之外做任何事情？好像它viewBox本身就是一个元素overflow: hidden

在jsFiddle中,您可以看到viewBox以蓝色突出显示的内容.

<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>

Answer 1

您可以将矩形用作<clipPath>:

<defs>
    <rect id="rect" width="100%" height="100%" fill="none" stroke="blue" />
    <clipPath id="clip">
        <use xlink:href="#rect"/>
    </clipPath>
</defs>

然后将其应用于<g>包含您的文本的元素(以及您要剪辑的任何内容:

<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>

由于<rect>仅用于塑造clipPath,你必须重绘它:

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

更新了小提琴