溢出:在SVG上可见

Question

是否有可能集overflow: visible上<svg>的元素？

这个关于jsfiddle的简单示例在我可以访问的每个浏览器中(某些版本的Chrome和Firefox)就像它们一样overflow: hidden.

任何人都可以告诉我svg支持是否仍然太不成熟,不能做这么简单的事情,或者我的代码中是否做错了什么？

我的实际用途overflow: visible是图表上的范围轴,其中-0勾选的下半部分被截断.

Answer 1

我假设您的意思是HTML中的内联<svg>元素,如果是这样,那么这只是一个实现限制.IE9 +允许overflow:visible使用<svg>元素,但到目前为止其他浏览器都不支持AFAIK.

一种可能的解决方法(实际上它应该首先在IMHO中完成)是指定一个viewBox定义svg内部坐标系的方法.然后你在这个坐标系中绘制东西.如果事物被剪裁(换句话说,如果元素在viewBox区域之外),那么只需相应地增加viewBox宽度和/或高度.

如果你想知道你的特定的默认值,请viewBox尝试[0 0 width height](宽度和高度是你目前拥有的svg的大小),然后只需增加高度,直到底部刻度完全可见.

2014年更新: 它在各个浏览器中仍然有点不一致,但它已经到了那里.Firefox和IE支持overflow:visible内联svg元素,而Blink(Opera 23/Chrome 36)也增加了对它的支持,详细信息请参见bugreport.

如果我设置了一个 viewBox，我的 svg 元素会被缩放以适应主 svg 元素。他们仍然没有溢出。只是使 svg 更大以适合我想要溢出的内容，会破坏 html 布局。 (2认同)
啊,我明白你的意思了.不,你不得不通过增加视口(也就是svg的大小)来解决缺乏对"overflow:visible"的支持. (2认同)

Answer 2

overflow: visible  
box-shadow : 0px -0px 10000px transparent /*trick for chrome*/

在 SVG 中添加一个巨大的盒子阴影，或者在具有巨大阴影的 DIV 中添加 SVG 可以解决此问题。在 Chrome 中，我注意到溢出被剪裁到框阴影限制。