在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图像元素

回答

相关问题