Question

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

Answer 1

与CSS属性几乎相同，您应该能够使用overflow：hidden;

正如您所注意到的那样，在<svg>的情况下，它将是内联的并显示为overflow = hidden。

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

1 个答案: