Svg 图像元素未在 Safari 中显示

问题描述 投票：0回答：8
svg safari
8个回答
41
投票

在 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>
28
投票

我认为这里有两个问题：

  1. 你还没有说你的SVG图像有多大。通常，您至少应该在 

    viewBox
    标签中包含 
    <svg>
    属性。例如：

    <svg width="250" height="250" viewBox="0 0 250 250" ... >

  2. 另一个问题是 Safari 在渲染 SVG 方面并不是特别出色。但是，当您使用 

    <iframe>
    或 
    <object>
    标签嵌入它们而不是使用 
    <img>
    时，效果往往会更好。例如：

    <object data="image.svg" type="image/svg+xml"></object>

    此外，请确保您的服务器正在提供具有正确 MIME 类型的 SVG 内容 (

    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>

图像.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>
19
投票

请务必为您的 

<svg>
标签提供高度、宽度和视图框，如下所示。由于某种原因，Safari 不喜欢将高度或宽度设置为 
auto
。 ⤵︎

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

在大部分时间使用 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);
    });
  }
}
3
投票

就我而言，问题与 

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

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

我保存为 .svg 文件的文字标记（我用作徽标的文本）出现问题。它在我的页面上带有 

<img src="...svg">
，但在 Safari 中没有正确显示（截至 2020 年 7 月的当前版本）。 SVG 在 FireFox、Chrome 和 Brave 上运行良好。

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

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

0
投票

对于现代 Safari 15.6.1（桌面版），只要 

height
和 
width
被 BOTH 定义为 
auto
（默认）以外的其他内容，它就会在没有任何属性的情况下进行渲染。

<svg height="48" width="48">...</svg>

但是，为了确保它正确缩放并可以通过 CSS 调整大小，最好使用 viewBox 比例并让 CSS 做它最擅长的事情（是的，由于 Safari，您仍然需要定义宽度和宽度高度）：

<svg viewBox="0 0 48 48">...</svg>

svg {
  width: 96px;
  height: 96px;
}
0
投票

我的 

svg
元素仅在 Safari 浏览器上出现问题 
Version 16.4 (18615.1.26.11.23)
我设法通过删除 
clipPath
元素的 
<g>
属性来解决问题，如下所示：

之前

  <svg width="24" height="25" viewBox="0 0 24 25" fill="none">
    <g clipPath="url(#clip0_1616_17127)">

之后

  <svg width="24" height="25" viewBox="0 0 24 25" fill="none">
    <g>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.