0

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

4

1 回答 1

1

与 CSS 属性几乎相同，您应该可以使用 overflow:hidden;

正如您所注意到的，在这种情况下<svg>它将是内联的并显示为溢出=隐藏。

于 2013-04-05T16:29:58.813 回答