Svg 图像元素未在 Safari 中显示答案

【问题标题】：Svg image element not displaying in SafariSvg 图像元素未在 Safari 中显示
【发布时间】：2015-01-30 11:29:00
【问题描述】：

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 中进行这项工作？

【问题讨论】：

标签： svg safari

【解决方案1】：

在 svg 元素内的 <image> 标记中，href 在 Chrome 中运行良好。要在旧版本的 Safari 中工作，您需要 xlink:href。（也适用于<use> 标签。）请记住，xlink:href 已被弃用，正在被href 取代。但是，直到 Safari 12 才支持它。

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

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ...>
    <image href="data..." xlink:href="data...">
</svg>

【讨论】：

耶！如此简单的修复，但我花了 3 个小时在它上面。 :F
这确实有效，但如果我无法在 chrome 上使用 xlink:href 怎么办？由于某种原因，整个东西都被删除了。
OmarAguinaga，你找到你想要的答案了吗？
截至 2018 年 5 月 30 日，这仍然是一个问题。svg 中的图像标签需要 xlink:href 属性才能呈现最新版本的 Safari。 href 自己的作品适用于 chrome、firefox、edge，但不适用于 safari。目前，我同时拥有 href 和 xlink:href，它们都适用于所有浏览器。
我现在同时使用 href 和 xlink:href，直到找到不使用的理由。谁知道 xlink:href 支持何时会真正被放弃？无论如何，OP 已经在使用 xlink:href。

【解决方案2】：

我认为这里有两个问题：

您还没有提到您的 SVG 图像有多大。通常，您至少应该在<svg> 标记中包含viewBox 属性。例如：
```
<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>

【讨论】：

当您将对象元素放在或中时，它似乎不可点击
不幸的是它在浏览器之间划分。在 Safari 中，如果直接父级定义了其高度和宽度，它将呈现。在较旧的 IE/Edge 中，svg 将填充祖父视图框，需要在定义的容器内有一个子 shim，然后 Safari 将其解释为一个模棱两可的字段。将祖父设置为大小，将父垫片设置为宽度 = 100%，然后 SVG 通常可以工作

【解决方案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);
    });
  }
}

【讨论】：

【解决方案4】：

就我而言，问题与svg 中的<mask> 标签有关。我删除了 svg 组件中的以下行，它开始在 Safari 上运行。

<mask id="y9iogdw0wd" fill="#fff">
    <use xlink:href="#jz8vxv0q6c"/>
</mask>

【讨论】：

【解决方案5】：

我保存为 .svg 文件的文字标记（我用作徽标的文本）有问题。它在我的页面上以 <img src="...svg"> 显示，但在 Safari 中没有正确显示（截至 2020 年 7 月的当前版本）。 SVG 与 FireFox、Chrome 和 Brave 配合得很好。

我在 Inkscape 中创建了 SVG。我选择了整个对象，然后使用 Path -> Object to Path... 并保存了生成的文件。

这在所有四个浏览器中都正确呈现。（我在这里写这个以防我再次遇到这个问题：它会告诉我我做了什么来解决它。）

【讨论】：

【解决方案6】：

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

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

-

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

干杯！

【讨论】：

【解决方案7】：

确保为您的<svg> 标签提供高度、宽度和视图框，如下所示。出于某种原因，当高度或宽度设置为 auto 时，Safari 不喜欢它。 ⤵︎

<svg height="16px" width="16px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M60......"></path></svg>

【讨论】：