SVG 明显被剪裁，但我仍然得到滚动条 - 裁剪 SVG答案

【问题标题】：SVG is visibly clipped, but I still get scroll bars - Cropping SVGSVG 明显被剪裁，但我仍然得到滚动条 - 裁剪 SVG
【发布时间】：2013-04-04 23:46:52
【问题描述】：

如果我有一个超出 SVG 大小的 SVG 元素，我的浏览器中会出现滚动条。我想将 SVG 控件拉伸为可见区域的大小，并且我不希望部分可见的元素导致页面上出现滚动条。

我已将其提炼为一个简单的示例。这是我的 HTML 文档正文中的内容：

<svg width="200" height="200">
    <defs>
        <clipPath id="clippath">
            <rect x="0" y="0" width="200" height="200" />
        </clipPath>
    </defs>
    <g clip-path="url(#clippath)">
        <rect x="100" y="50" width="2000" height="50" style="stroke: red; stroke-width: 5; fill: lightblue" />
    </g>
</svg>

如您所见，SVG 元素被定义为 200x200，并且明显被裁剪为 200x200。但是，当您在浏览器中打开它时，您会看到一个滚动条，因为矩形超出了 SVG 元素的末端并超出了页面。

如何摆脱滚动条？本质上，我想将 SVG 裁剪到剪辑路径。

更新：这似乎只是 IE 中的问题。 Firefox 和 Chrome 以我喜欢的方式呈现它。

【问题讨论】：

您是否尝试将其设置为“溢出：隐藏”？
宾果游戏！ <svg overflow=hidden ...>
你介意我把这个答案放在下面并且你接受吗？

标签： html browser svg rendering

【解决方案1】：

和CSS属性差不多，应该可以使用overflow:hidden;

如您所见，在 <svg> 的情况下，它将内联并显示为 overflow=hidden。

【讨论】：