Safari如何計算svg對象的大小？

Safari在以下場景中如何確定輸出svg的大小;Safari如何計算svg對象的大小？

SVG代碼

viewBox 0 0 800 800 
height 100% 
width 100%

CSS

svg width 100% 
containing div width 60%

Safari的輸出比屏幕的60％更小的SVG，確定這是一個錯誤。但是什麼決定了這個更小的svg的大小，它與我所能想到的任何東西都沒有關係。

只給一些背景資料。 Safari需要px的寬度和高度才能做到你想要的。％不工作。但它確實輸出了svg，所以它必須在其大小的某個地方作出決定。

來源

2012-04-23 Gamemorize

是那個僞代碼？ – mihai 2012-04-23 20:37:23

只是說相關性作爲一個例子，我的代碼不會有很多工作要做的Safari是如何工作的？ – Gamemorize 2012-04-23 21:32:20

這不是你看到的錯誤。這是正確的行爲。默認瀏覽器（現在小心的術語，我們不是在談論瀏覽器視）縮放SVG 視框填補了SVG元素的CSS-確定尺寸。填充行爲由SVG preserveAspectRatio屬性確定。默認情況下，它設置爲meet，這將保持整個SVG可見，並且保持寬高比。替代方案是slice，即使這意味着裁剪，它也會將視箱向上縮放以覆蓋元素。（slice行爲類似於background-size:cover在CSS3）

你需要做的是：

一）不要聲明明確的高度或寬度在SVG文件。如果您的圖形編輯器正在生成它們，請手動進入並刪除它們。根據spec，如果未指定寬度和高度，則假定值爲100％，因此您的僞代碼最好是冗餘的。

二）確保您設置在CSS中的SVG元素的顯式高度。我建議開發人員或金絲雀版本的Chrome用於故障排除響應式svg大小調整，因爲Chrome 18開發工具中有一個bug已經修復。一旦你在Chrome中使用它，它幾乎肯定也會在Safari中運行。

C）弄清楚要如何設置preserveAspectRatio和手動編輯SVG放於聲明。

如果您仍然遇到問題，請張貼的jsfiddle。其他人評論容易得多。

來源

2012-05-29 18:30:43 Ben

刪除寬度從 2013-06-23 09:57:24

Safari如何計算svg對象的大小？

回答

相關問題