Question

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中使用？

Answer 1

对我来说问题是我在Chrome中使用href属性没有任何问题。要使其在Safari中正常工作，您需要使用xlink:href。请注意，xlink:href已被弃用，正在被href取代。但是，Safari尚不支持它。

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/href

Answer 2

我认为这里存在两个问题：

您还没有说过您的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>

Answer 3

我在大部分时间使用Chrome后检查我在Safari中工作的应用时发现了同样的问题。我写了一些TypeScript / jQuery代码（很容易变成普通的JavaScript）来解决这个问题：

export function setSvgHref(elem: JQuery, href: string) {
  elem.attr('href', href);

  if (isSafari()) {
    elem.each(function() {
      this.setAttributeNS('http://www.w3.org/1999/xlink', 'href', href);
    });
  }
}

Answer 4

我将保存为.svg文件的单词标记（用作徽标的文本）遇到问题。它在我的页面上带有<img src="...svg">，但在Safari（截至2020年7月的当前版本）中无法正确显示。 SVG可与FireFox，Chrome和Brave配合使用。

我已经在Inkscape中创建了SVG。我选择了整个对象，然后使用“路径”->“对象到路径...”并保存了生成的文件。

这在所有四个浏览器中均正确显示。（如果我再次遇到这个问题，我会在这里写：它会告诉我我做了什么修复。）

Answer 5

Figma 中的 SVG 有此问题：我的解决方案 -> 将损坏的 SVG 拖放到新的 Figma 空白文件中，然后将其重新导出为 SVG

它现在应该可以工作，甚至可以在 MacOS 上的 Finder QuickLook 中正确显示

-

您也可以将其导入 AI 并重新导出为 SVG 以获得相同的结果

干杯！

Svg图像元素未在Safari中显示

5 个答案: