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

问题描述

是否可以在 元素上设置 overflow:visible ?

jsfiddle 上的这个简单示例 在我可以访问的每个浏览器(某些版本的 Chrome 和 Firefox)中都中断了，因为它们的行为就像溢出:隐藏.

谁能告诉我 svg 支持是否还太不成熟而无法做这么简单的事情，或者我的代码是否有问题?

我对 overflow:visible 的实际使用是图表上的范围轴，其中 -0 刻度的下半部分被截断.

解决方案

我假设你的意思是 HTML 中的内联 overflow:visible 在 <svg> 元素上，但目前其他浏览器不支持.

一种可能的解决方法(恕我直言，这实际上应该是如何完成的)是指定一个 viewBox 来定义 svg 内的坐标系.然后你在这个坐标系内绘制东西.如果东西被剪掉了(或者换句话说，如果元素在 viewBox 区域之外)，那么只需相应地增加 viewBox 宽度和/或高度.

如果您想知道特定 viewBox 的良好默认值，请尝试 [0 0 宽度高度](其中宽度和高度是您在时刻)，然后只需增加高度，直到底部刻度完全可见.

2014 年更新:它在浏览器之间仍然有点不一致，但它正在到达那里.Firefox 和 IE 在内联 svg 元素上支持 overflow:visible，并且 Blink (Opera 23/Chrome 36) 也添加了对它的支持，详情参见 错误报告.

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

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.

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?

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

解决方案

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.

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.

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 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屋！