是否可以在<svg>元素上设置overflow: visible？
这个在jsfiddle上的简单示例在我可用的所有浏览器中都会出现问题（某些版本的Chrome和Firefox），它们就像overflow: hidden一样。
有人能告诉我，是SVG支持还不够成熟以至于无法做出这样简单的事情吗？还是我的代码有问题？
我的实际使用中overflow: visible是用在图表的range-axis上，其中-0刻度的底部一半被剪切掉了。
溢出：SVG上可见
37
- Thomas Ahle
3
好像不是。请参见https://dev59.com/EWLVa4cB1Zd3GeqPw34t。 - Yarin
3现在上面的例子可以运行（至少在53版的Google Chrome浏览器中）。 - Vlad Nikitin
“overflow: visible”在Safari 10 iOS或以上版本中可用。 - CrazyTim
2个回答
36
我猜您指的是HTML中的内联overflow: visible，但就我所知，其他浏览器目前不支持。
一个可能的解决方法（实际上在我看来应该首先这样做）是指定一个viewBox，该视口定义了svg内部的坐标系统。然后你在这个坐标系内绘制图形。如果东西被剪切了（或者换句话说，如果元素在viewBox区域之外），那么只需相应地增加viewBox的宽度和/或高度。
如果您想知道特定viewBox的好默认值，请尝试[0 0 width height]（其中width和height是您目前拥有的svg的大小），然后将高度增加到底部刻度完全可见。
2014更新:
跨浏览器仍然有点不一致，但正在朝着这个方向前进。Firefox和IE支持在内联SVG元素上使用overflow:visible，Blink（Opera 23 / Chrome 36）也为其添加了支持，有关详细信息请参见bugreport。
- Erik Dahlström
5
2如果我设置了一个viewBox，我的svg元素会被缩放以适应主svg元素内部。它们仍然不会溢出。只是将svg变得更大以适应我想要溢出的内容，会破坏HTML布局。 - Thomas Ahle
也许我真正需要知道的是，webkit是否支持此功能，标准是否指定了它，并且我是否正确地认为webkit曾经支持它？ - Thomas Ahle
2啊，我现在明白你的意思了。你需要通过增加视口（即svg的大小）来解决
overflow:visible不支持的问题。 - Erik Dahlström太棒了，就像魔法一样。解决了我试图解决的大部分错误。 - mythicalcoder
我想要使用
overflow:hidden 以便SVG不会在其容器外可见。我们可以这样做吗？ - lmat - Reinstate Monica6
overflow: visible
box-shadow : 0px -0px 10000px transparent /*trick for chrome*/
将一个巨大的box-shadow添加到SVG中，或者在一个带有巨大阴影的DIV中添加SVG可以解决它。在Chrome中，我注意到溢出被剪切到了box-shadow的限制。
- Kim Sant
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接