SVG图像模式不适用于Safari

时间:2017-02-01 08:47:11

标签: google-chrome svg safari

我有一个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,根本不会显示任何内容

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

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