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

【问题标题】：SVG viewbox overflow: hidden / cropSVG 视图框溢出：隐藏/裁剪
【发布时间】：2014-06-06 04:34:41
【问题描述】：

有没有办法让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>

【问题讨论】：

标签： svg

【解决方案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"/>

Updated fiddle

【讨论】：

看起来你可以直接在svg标签上使用clip-path="url(#clip)"，所以不需要额外的g标签。
@bfred.it 这在 Edge/IE 中似乎并不总是有效。有什么建议吗？