在Safari中不顯示Svg圖像元素

Safari瀏覽器（我在Windows下測試）在顯示Svg圖像元素時似乎有問題。在Safari中不顯示Svg圖像元素

<!DOCTYPE html> 
<html> 
<body> 

<h1>My first SVG</h1> 

<img src="image.svg" /> 

</body> 
</html>

這裏是image.svg的內容：

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<!-- Created with Inkscape (http://www.inkscape.org/) --> 
<svg 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
     <rect x="50" y="50" width="100" height="100" style="fill:blue"></rect> 
     <rect id="foo" x="50" y="150" width="500" height="500" style="fill:green"></rect> 
    <image x="50" y="10" width="200" height="200" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="></image> 
</svg>

是否有任何解決方案或替代方法，以使在Safari這項工作？

來源

2014-12-02 user2179256

我覺得有兩個問題在這裏：

你還沒說你的SVG圖像多大事情。通常，您至少應在<svg>標記中包含viewBox屬性。例如：
```
<svg width="250" height="250" viewBox="0 0 250 250" ... > 
```
另一個問題是Safari在渲染SVG時不是特別出色。但是，如果將它們嵌入或<object>標籤而不是使用<img>，則它會更好。例如：
```
<object data="image.svg" type="image/svg+xml"></object> 
```
此外，請確保您的服務器提供SVG內容與正確的MIME類型（Content-Type: image/svg+xml），因爲這可能會導致問題太多。

那麼試試這個：

HTML源代碼：

<!DOCTYPE html> 
<html> 
<body> 
<h1>My first SVG</h1> 
<object data="image.svg" type="image/svg+xml"></object> 
</body> 
</html>

image.svg：

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<svg width="250" height="250" viewBox="0 0 250 250" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
     <rect x="50" y="50" width="100" height="100" style="fill:blue"></rect> 
     <rect id="foo" x="50" y="150" width="500" height="500" style="fill:green"></rect> 
    <image x="50" y="10" width="200" height="200" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="></image> 
</svg>

來源

2014-12-02 12:27:25

測試...工作正常。 – rfornal 2014-12-02 22:43:14

看起來像對象元素是不可點擊的當你把它放在或

對我來說，問題在於我在Chrome中使用href屬性時沒有任何問題。爲了在Safari中正常工作，您需要使用xlink:href。

來源

2017-05-03 07:45:37

Yaaaaas！這樣簡單的修復，但我花了3個小時。：F – Askdesigners 2017-05-03 12:49:55

這是行得通的，但如果我不能在chrome上使用'xlink：href'，該怎麼辦？由於某種原因整個事情被刪除。 – OmarAguinaga 2017-09-12 16:46:15

OmarAguinaga，你有沒有找到你正在尋找的答案？ – 2017-12-14 14:41:33

在Safari中不顯示Svg圖像元素

回答

相關問題