Safari滾動條和SVG

問題：Safari不是在打球，而是用滾動條呈現我的SVG圖像。Safari滾動條和SVG

問題的改進版本：「如何獲得填充設置寬度並根據Safari中的高寬比計算高度？」（感謝Phrogz）

相關的代碼：

SVG文件

viewBox="0 0 800 800"

（沒有指定的高度或寬度）

.objectwrapper { 
 
    max-width: 600px; 
 
    min-width: 150px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 
.objectdiv { 
 
    max-width: 60%; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    display: block; 
 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" /> 
 
    <meta http-equiv="expires" content="0" /> 
 
</head> 
 

 
<body> 
 
    <div class="objectwrapper"> 
 
    <div class="objectdiv"> 
 
     <object type="image/svg+xml" data="question0optimize1.svg" width="100%" height="100%"> 
 
     </object> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

在所有噸他嘗試過的其他瀏覽器可以很好地平滑縮放窗口大小並按Ctrl + Zooming。但Safari提供了更小的svg和滾動條。我究竟做錯了什麼？

來源

2012-04-05 Gamemorize

請注意，您在HTML元素上聲明瞭XHTML名稱空間，但是它是HTML4 DOCTYPE。（而且你的內容顯然不是XHTML，就像未封閉的'meta'標籤一樣。） – Phrogz 2012-04-05 14:54:56

@Progrog謝謝，我會更新文檔類型。爲了解這個問題的實際效果，我會在這裏看看它（如果人們希望看到最終的源代碼，這個網站應該會有其他的svg）www.gamemorize.com – Gamemorize 2012-04-05 15:01:39

W/H被放在100 ％以確保所有的svg被渲染，但我現在已經刪除它，它沒有區別。我希望對象填充其分配的CSS寬度的100％，然後按比例保持高度=寬度。 Safari似乎分配了一個固定的高度。請注意當窗口縮小/放大時滾動條的高度。 – Gamemorize 2012-04-05 15:28:47

你得到一個滾動條，在Safari，原因是：

height="100%"在object是使它一樣高的身體，
因爲<object>默認爲display:inline你得到額外的基線（4px-在物體下面。 100％+任何東西都比窗口高，因此滾動條顯示。

如果你一定要清楚你想要的最後陳述是，具體是什麼，應該高度是什麼你<object> -I可以幫助您使它工作跨瀏覽器。

最有可能您希望a）通過CSS在<object>上設置display:block，和/或b）從<object>中刪除height="100%"。（如果你想跨瀏覽器的高度控制，通過CSS設置高度，沒有表現屬性。）

你可以看到我的失敗測試在
http://phrogz.net/svg/svg_via_object.html
和
http://phrogz.net/svg/svg_via_object.xhtml

的註解例子中，固定版本

（HTML4與XHTML的使用與問題或修復無關。）

來源

2012-04-05 15:14:30 Phrogz

@亞當我已經編輯了我的答案，並詳細說明了哪裏出了問題。 – Phrogz 2012-04-05 15:26:58

Hey Phrogz，我之前使用過你的想法，他們已經幫助過我，但是在您的網站上，請注意Safari如何放大時爲您提供滾動條。其他任何瀏覽器都不會出現這種情況。 – Gamemorize 2012-04-05 15:33:09

重新高度。我希望它保持它在對象中的寬度的比例。在我的現場版本中，它是800px x 792px。 – Gamemorize 2012-04-05 15:35:41

我在Windows上的Safari5下有類似的SVG問題。它顯示滾動條沒有明顯的原因。

找到一個解決方案，我在這裏：https://stackoverflow.com/a/8025526/2244646：

我曾在一個文本編輯打開SVG和圓潤的SVG節點的高度屬性從79.999px到80px。不知何故，Safari5不喜歡這些領域的奇數。

來源

2014-01-30 12:37:32 rejas

我在Windows上使用Safari時遇到了與SVG相同的問題。 SVG具有垂直和水平滾動條。

但是，我在文本編輯器中打開了SVG文件，並且我有奇怪的高度和寬度屬性。我將它們改爲偶數，解決了問題。

來源

2015-04-19 21:30:13

Safari滾動條和SVG

回答

相關問題