SVG图像元素未在Safari中显示

用户名

Safari浏览器（我正在Windows下进行测试）似乎在显示Svg Image元素时出现问题。

<!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中实现此目的？

r3mainer

我认为这里有两个问题：

您尚未说出SVG图片的大小。通常，您至少应在标签中包含viewBox属性<svg>。例如：
```
<svg width="250" height="250" viewBox="0 0 250 250" ... >
```
另一个问题是Safari在呈现SVG方面并不是特别出色。但是，当您将它们嵌入到<iframe>或<object>标记而不是使用时，它往往会做得更好<img>。例如：
```
<object data="image.svg" type="image/svg+xml"></object>
```
另外，请确保您的服务器以正确的MIME类型（Content-Type: image/svg+xml）传递SVG内容，因为这也会引起问题。

因此，尝试一下：

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。