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