SVG 图像模式在 Safari 上不起作用答案

【问题标题】：SVG image pattern doesn't work on SafariSVG 图像模式在 Safari 上不起作用
【发布时间】：2017-06-17 22:34:01
【问题描述】：

我有一个 svg 形状，我用以下内容填充了背景图像

<defs>
    <pattern id="circle" x="-50%" y="-50%" height="200%" width="500%" viewBox="0 0 750 750">
        <image x="0%" y="0%" width="750" height="750" href="image.png"></image>
    </pattern>
</defs>
<path fill="url(#circle)" id="XMLID_22_" d="M561.8 396.7c0 44.6-36.1 80.7-80.7 80.7-44.5 0-80.7-36.1-80.7-80.7 0-44.5 36.1-80.7 80.7-80.7s80.7 36.1 80.7 80.7z"/>

它在 Chrome 上可以使用 Charm，但在 Safari 上不可用，根本没有显示任何内容

【问题讨论】：

是的，谢谢，这就是解决方案！
解决方案是什么？

标签： google-chrome svg safari

【解决方案1】：

Safari 不支持href，你需要在那里使用xlink:href。 href 是即将到来的 SVG 2 规范的一个新特性。 xlink:href 是 SVG 1.1 版本。

【讨论】：

【解决方案2】：

要让 Safari 处理 svg 图像模式，我了解到您需要三件事： 1) 确保您使用 xlink:href 如上所述。 2）您的图案/图像必须具有以像素为单位的宽度和高度。 Chrome 不需要这个，而你已经有了这个。我只是提到它 b/c 这是我必须改变的事情之一才能让我的工作。 3）您对网址的引用必须完整：填充=url(+ window.location.origin + window.location.pathname + #circle

【讨论】：