溢出：SVG上可見

可能在<svg>元素上設置了overflow: visible？溢出：SVG上可見

This simple example on jsfiddle在我有權訪問的每個瀏覽器（某些版本的Chrome和Firefox）中出現故障，因爲它們的行爲類似於overflow: hidden。

任何人都可以告訴我，如果svg支持簡直還不成熟，做這麼簡單的事情，或者如果我在我的代碼中做錯了什麼？

我的overflow: visible的實際應用是圖上的範圍軸，其中-0滴答的下半部被切斷。

看起來不像。另請參見http://stackoverflow.com/q/10077264/165673 – Yarin

現在上面的示例作品（至少在谷歌瀏覽器53） –

我假設你的意思是在HTML中嵌入< svg>元素，如果是這樣，那麼這只是一個實現限制。 IE9 +允許使用overflow:visible svg>元素，但到目前爲止，其他瀏覽器不支持AFAIK。

一個可能的解決方法（這是真的它應該如何在第一時間恕我直言做）是指定viewBox它定義了SVG內部的座標系。然後你在這個座標系中畫東西。如果事情被限制（換句話說，如果元素在viewBox區域之外），那麼只需相應地增加寬度和/或高度。

如果您想知道您的特定viewBox的良好默認值，請嘗試[0 0 width height]（其中寬度和高度是您目前svg的大小），然後只需增加高度，直到底部刻度完全可見。

2014更新： 它在瀏覽器中仍然有點不一致，但它已經到了。 Firefox和IE在內聯svg元素上支持overflow:visible，Blink（Opera 23/Chrome 36）也支持它，詳情請參閱bugreport。

2012-09-08 13:15:56

如果我設置viewBox我的svg元素被縮放以適應主svg元素。他們仍然沒有溢出。只是讓svg更大以適應我想要溢出的東西，將會破壞html佈局。 –

也許我真的需要知道的是，webkit是否支持這個標準，如果標準指定了它，以及我認爲webkit用於支持它嗎？ –

啊，我明白你的意思了。不，你必須通過增加視口（也就是svg的大小）來解決缺乏對'overflow：visible'支持的問題。 –

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

添加一個巨大的box-shadow到SVG，或增加與巨大的陰影DIV的SVG解決它。在Chrome瀏覽器中，我注意到溢出被剪裁到了盒子陰影極限。

2017-06-19 08:28:17

回答