发表新帖
发表新帖

Svg image element not displaying in Safari

前端 未结
关注
4 546
自闭症患者
自闭症患者 2020-12-14 10:39

Safari browser (I\'m testing under windows) seems having problem in displaying Svg Image element.
相关标签:
4条回答
  • Happy的楠姐
    2020-12-14 10:47

    In the <image> tag inside the svg element, href works fine in Chrome. To work in older versions of Safari, you need xlink:href. (Also applies to the <use> tag.) Keep in mind xlink:href is deprecated and is being replaced by href. However, it was not supported until 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>
    0 讨论(0)
  • 粉色の甜心
    2020-12-14 10:56

    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)
  • 花落未央
    2020-12-14 11:03

    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)
  • 走了就别回头了
    2020-12-14 11:12

    I had a problem with a wordmark (text that I use as a logo) that I saved as a .svg file. It was on my page with a <img src="...svg"> but did not appear properly in Safari (current version as of July 2020). The SVG worked fine with FireFox, Chrome, and Brave.

    I had created the SVG in Inkscape. I selected the entire object, then used Path -> Object to Path... and saved the resulting file.

    This rendered properly in all four browsers. (I'm writing this here in case I have this problem again: it'll tell me what I did to fix it.)

    0 讨论(0)
 看不清?
提交回复
热议问题