溢出：在SVG上可见 [英] Overflow: Visible on SVG

问题描述

是否可能在< svg> 元素上设置 overflow：visible ？

Is it possible set overflow: visible on <svg> elements?

在jsfiddle 上的这个简单示例在每个可以访问的浏览器中都会中断（某些版本的Chrome和Firefox ），因为他们的行为像 overflow：hidden 。

This simple example on jsfiddle breaks in every browser I have access to, (some versions of Chrome and Firefox) as they act like overflow: hidden.

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

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?

我实际使用 overflow：visible 是图形上的范围轴，其中 -0 tick的下半部分被截断。

My practical use of overflow: visible is a range-axis on a graph, where the bottom half of the -0 tick gets cut off.

推荐答案

我假设你的意思是在HTML中的内联< svg元素，如果是这样，这只是一个实现限制。 IE9 +允许 overflow：visible on< svg>元素，但是到目前为止，其他浏览器没有AFAIK。

I assume you mean inline <svg> elements in HTML, if so then this is just an implementation limitation. IE9+ allows overflow:visible on <svg> elements, but so far the other browsers don't AFAIK.

一个可能的解决方法（这是真正应该如何做在第一个地方IMHO）是指定一个 viewBox ，它定义了svg中的坐标系。然后你在这个坐标系内绘制东西。如果事情被剪裁（或换句话说，如果元素在 viewBox 区域之外），那么只需增加 viewBox width和/或height。

One possible workaround (which is really how it should be done in the first place IMHO) is to specify a viewBox which 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 viewBox area), then just increase the viewBox width and/or height accordingly.

如果你想知道你的特定 viewBox 尝试 [0 0 width height] （其中width和height是你的svg的大小），然后只是增加高度，直到底部刻度完全可见。

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.

2014年更新：
它在浏览器中仍然有点不一致，但它到达那里。 Firefox和IE支持inline svg元素中的 overflow：visible ，Blink（Opera 23 / Chrome 36）也增加了对它的支持，详细信息请参见 bugreport 。

2014 update: It's still a little bit inconsistent across browsers, but it's getting there. Firefox and IE support overflow:visible on inline svg elements, and Blink (Opera 23/Chrome 36) added support for it too, for the details see bugreport.

这篇关于溢出：在SVG上可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！