CSS 溢出：在 SVG 上可见
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12326838/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Overflow: Visible on SVG
提问by Thomas Ahle
Is it possible set overflow: visibleon <svg>elements?
是否可以overflow: visible在<svg>元素上设置？
This simple example on jsfiddlebreaks in every browser I have access to, (some versions of Chrome and Firefox) as they act like overflow: hidden.
这个关于 jsfiddle 的简单示例在我可以访问的每个浏览器（某些版本的 Chrome 和 Firefox）中都会中断，因为它们的行为类似于overflow: hidden.
Can anybody tell me if svg support is simply still too immature to do such simple things, or if I'm doing something wrong in my code?
谁能告诉我 svg 支持是否仍然太不成熟而无法做这么简单的事情，或者我在代码中做错了什么？
My practical use of overflow: visibleis a range-axis on a graph, where the bottom half of the -0tick gets cut off.
我的实际用途overflow: visible是图表上的范围轴，其中-0刻度的下半部分被切断。
回答by Erik Dahlstr?m
I assume you mean inline <svg> elements in HTML, if so then this is just an implementation limitation. IE9+ allows overflow:visibleon <svg> elements, but so far the other browsers don't AFAIK.
我假设您的意思是 HTML 中的内联 <svg> 元素，如果是这样，那么这只是一个实现限制。IE9+ 允许overflow:visible<svg> 元素，但到目前为止其他浏览器不支持。
One possible workaround (which is really how it should be done in the first place IMHO) is to specify a viewBoxwhich defines the coordinate system inside the svg. Then you draw stuff inside this coordinate system. If things get clipped (or in other words if the element(s) are outside the viewBoxarea), then just increase the viewBoxwidth and/or height accordingly.
一种可能的解决方法（恕我直言，这实际上是应该如何完成的）是指定 aviewBox来定义 svg 内的坐标系。然后你在这个坐标系内绘制东西。如果东西被剪裁了（或者换句话说，如果元素在viewBox区域之外），那么只需相应地增加viewBox宽度和/或高度。
If you wonder about a good default for your particular viewBox, try [0 0 width height](where width and height is the size of your svg you have at the moment), then just increase the height until the bottom tick is fully visible.
如果您想知道特定的一个好的默认值，请viewBox尝试[0 0 width height]（其中宽度和高度是您目前拥有的 svg 的大小），然后增加高度直到底部刻度完全可见。
2014 update:It's still a little bit inconsistent across browsers, but it's getting there. Firefox and IE support overflow:visibleon inline svg elements, and Blink (Opera 23/Chrome 36) added support for it too, for the details see bugreport.
2014 年更新：跨浏览器仍然有点不一致，但它正在到达那里。Firefox 和 IE 支持overflow:visible内联 svg 元素，并且 Blink (Opera 23/Chrome 36) 也添加了对它的支持，详情参见bugreport。
回答by Kim Sant
overflow: visible
box-shadow : 0px -0px 10000px transparent /*trick for chrome*/
Adding a huge box-shadow to the SVG , or adding the SVG in a DIV with the huge shadow solve it. In Chrome I noticed that the overflow is being clipped to the box-shadow limit.
向 SVG 添加一个巨大的 box-shadow ，或者在一个带有巨大阴影的 DIV 中添加 SVG 解决它。在 Chrome 中，我注意到溢出被裁剪到 box-shadow 限制。
