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

如果我有一个超出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元素被定义为200×200，它是明显的剪裁到200×200。但是，当您在浏览器中打开该窗口时，您将看到一个滚动条，因为该矩形延伸出SVG元素的末端并离开页面。

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

更新：这似乎只是在IE中的一个问题。 Firefox和Chrome以我喜欢的方式渲染它。

来源

2013-04-04 MattD

您是否尝试将其设置为“overflow：hidden”？ – ntgCleaner 2013-04-04 23:54:26

宾果！ ' MattD 2013-04-05 04:00:38

如果我在下面放置答案并接受它，你介意吗？ – ntgCleaner 2013-04-05 16:19:38

与CSS属性差不多，你应该可以使用overflow：hidden;

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

来源

2013-04-05 16:29:58 ntgCleaner

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

回答

相关问题