Raphael SVG元素有時溢出低於摺疊

我有一個Raphael.js SVG元素生活在一個div內。有時候 - 當頁面加載時，或者當一個jQuery UI拖拽被拖拽到主svg節點上時，整個SVG元素（over？）幾乎在頁面下面流動。也就是說，如果它起始於0,0並且高度是500px，它突然跳到0,500，但並不總是如此。我嘗試設置位置：相對，但似乎並沒有解決它。實際上，調整位置：在Chrome調試器中使其「回來」，但通過頁面加載保留它不會永久解決問題。它可能發生在所有頁面加載的一半。Raphael SVG元素有時溢出低於摺疊

任何人都知道什麼可能導致這種情況，或者至少有一種方法來阻止它頂部？我相當CSS-無知。

道歉沒有一個例子;這是我目前無法分享的大型設置的一部分。我希望有人有預感。

來源

2013-07-25 grantpatterson

顯然它是一些CSS變換：輸入路徑不在正確的座標空間，所以我們在<svg>元素中做-webkit-transform: translateY(400px) scaleY(-1);。我會在將它們放入DOM之前嘗試縮放路徑。

來源

2013-07-26 19:45:57 grantpatterson

對DOM沒有其他更改，刪除CSS轉換並在Raphael中進行路徑轉換已解決此問題。 – grantpatterson

你可以在生成的源代碼發生的時候檢查它（我使用Web Developer工具，並且有一個選項可以查看生成的源代碼 - 並確定Chrome中有類似的東西），以查看是否不存在一個插入它之前的元素（或者是程序邏輯中的某個東西導致畫布被複制）。我曾經與Raphael有過一些非常奇怪的行爲，並發現它與我在頁面上無意中加載同一個腳本兩次相關。

我總是可以在CSS中建議絕對定位，但這聽起來不像它會解決底層問題。

祝你好運，希望有所幫助。

來源

2013-07-25 09:33:10 pingin

是的，我正在看它;來源不變。我想我也會注意到CSS的變化，所以看起來渲染引擎本身正在決定它屬於一個突然不同的地方。即使在svg元素上有絕對位置，它仍然會彈出。 – grantpatterson

這很奇怪。無論如何，絕對定位應該保持固定。你確定當你使用絕對定位時，有一個具有非靜態位置屬性的父級（例如position：relative）嗎？沒有看到它，我只是在這裏猜測。我想這將有助於你縮小問題的可能原因。我可能會在CSS容器中放置一個邊框，然後看看如果canvas本身正在展開，或者如果它確實是包含分隔符的包含div時，會發生什麼情況。對不起，如果這不是很有幫助。 – pingin

Raphael SVG元素有時溢出低於摺疊

回答

相關問題