Html SVG明显被剪裁了，但我仍然可以看到滚动条——裁剪SVG

如果有一个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以我喜欢的方式呈现它。

与CSS属性基本相同，您应该能够使用overflow:hidden

---

正如您所注意到的，在

的情况下，它将是内联的，并显示为overflow=hidden。

您是否尝试将其设置为“overflow:hidden”？宾果<代码>你介意我把答案放在下面，你接受吗？