2012-09-10 82 views
1

之間是一致的,我注意到邊界瀏覽器之間的形狀的盒子之間不一致。餘由SVG包含此:的SVG元素的邊框是不是瀏覽器

<rect x="100" y="100" width="100" height="100" id="rect" fill="gray" stroke="black" stroke-width="2px" /> 
<path d="M100 100 L100 200 L200 200 L200 100 z" id="path" fill="red" stroke="white" stroke-width="2px"/> 

當我試圖在Chrome和IE得到他們的邊界框(element.getClientBoundingBox)的尺寸爲w = 100,H = 100,它們的位置爲x = 100,Y = 100兩種形狀。 但是在第一個形狀的FireFox中,我獲得了w = 102,h = 102(大小+邊框)和x = 99,y = 99。 在路徑上,這些值更加奇怪 - w = 116,h = 116,x = 92,y = 92。

這是一個Firefox的錯誤 - 應該被張貼到Bugzilla的? SVG規範是否說明了這一點? (我找不到與此相關的任何信息)。 有沒有人知道解決這個問題的方法?特別是路徑元素對我來說是不可預知的。

回答

4

火狐包括邊框行程。 We have asked規範要更改以反映這是正確的。

對於路徑的尺寸太大,因爲我們不這樣做,因爲估計大小尖尖的形狀的複雜工作了描邊形狀的實際大小的一個很好的工作。我們使用stroke-miterlimit來給出一個上限,但並不是那麼好。

你可以使用SVG DOM getBBox方法,排除形狀的筆觸和只是給你補尺寸。

+0

感謝一些澄清。有一段時間我雖然這種形狀在許多瀏覽器上的位置是不同的,但現在我明白,唯一的區別是getClientBBox返回的值。 – Pax0r

+0

@ robert-longson這不再是這種情況,對嗎?今天,getClientBoundingBox似乎不包括筆畫 –

+0

@DonBox Firefox代碼在這方面沒有改變,它仍然返回筆畫。如果你有一個測試,證明否則你可以提出bugzilla中的錯誤。 –

相關問題