Question

我有一个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上的魅力，但不适用于Safari，根本不会显示任何内容

Answer 1

Safari不支持href，你需要在那里使用xlink：href。 href是即将发布的SVG 2规范的新功能。 xlink：href是SVG 1.1版本。

Answer 2

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

SVG图像模式不适用于Safari

2 个答案: