Svg image element not displaying in Safari

2020-02-08 09:17发布

站内问答 / 前沿技术
1832 3 5

Safari browser (I'm testing under windows) seems having problem in displaying Svg Image element.

<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

<img src="image.svg" />

</body>
</html>

And here is the content of the 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>

Is there any solution or workaround to make this work in Safari?

标签： svg safari
举报
3条回答
霸刀☆藐视天下
2楼-- · 2020-02-08 09:43

I just discovered this same problem when I checked an app I was working on in Safari, after having been using Chrome most of the time. I wrote this bit of TypeScript/jQuery code (easily enough turned into plain JavaScript) to solve the problem:

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);
    });
  }
}
查看更多
0人赞 添加讨论(0) 举报
爷的心禁止访问
3楼-- · 2020-02-08 09:53

For me the problem was that I was using the href attribute without any problem in Chrome. For it to work properly in Safari, you need to use xlink:href. Keep in mind xlink:href is deprecated and is being replaced by href. However, it is not yet supported in Safari.

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

查看更多
0人赞 添加讨论(0) 举报
在下西门庆
4楼-- · 2020-02-08 10:05

I think there are two problems here:

  1. You haven't said anything about how large your SVG image is. As a rule, you should at least include a viewBox attribute in the <svg> tag. For example:

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

  2. The other problem is that Safari isn't particularly brilliant at rendering SVGs. However, it tends to do better when you embed them with an <iframe> or <object> tag instead of using <img>. For example:

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

    Also, make sure your server is delivering SVG content with the correct MIME type (Content-Type: image/svg+xml), as this can cause problems too.

So give this a try:

HTML source:

<!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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)