Question

包含模式的SVG文件。当我在Firefox中打开这个SVG时，我没有得到预期的结果，尽管它在Google Chrome上正常运行。

这是代码：

<pattern  x="-195.767" y="505.764" width="42.226" height="42.227" patternUnits="userSpaceOnUse" id="SVGID_1_" viewBox="0.147 -42.227 42.226 42.227" overflow="visible">
<g>
    <polygon fill="none" points="0.147,0 42.373,0 42.373,-42.227 0.147,-42.227      "/>
    <g>
        <polygon fill="none" points="0.147,-42.227 0.147,0 42.373,0 42.373,-42.227          "/>
        <line fill="none" stroke="#7F7F7F" stroke-width="0.5" x1="0" y1="-40.115" x2="42.52" y2="-40.115"/>
        <line fill="none" stroke="#7F7F7F" stroke-width="0.5" x1="0" y1="-31.67" x2="42.52" y2="-31.67"/>
        <line fill="none" stroke="#7F7F7F" stroke-width="0.5" x1="0" y1="-23.225" x2="42.52" y2="-23.225"/>
        <line fill="none" stroke="#7F7F7F" stroke-width="0.5" x1="0" y1="-14.779" x2="42.52" y2="-14.779"/>
        <line fill="none" stroke="#7F7F7F" stroke-width="0.5" x1="0" y1="-6.334" x2="42.52" y2="-6.334"/>
        <line fill="none" stroke="#7F7F7F" stroke-width="0.5" x1="0" y1="-35.893" x2="42.52" y2="-35.893"/>
        <line fill="none" stroke="#7F7F7F" stroke-width="0.5" x1="0" y1="-27.448" x2="42.52" y2="-27.448"/>
        <line fill="none" stroke="#7F7F7F" stroke-width="0.5" x1="0" y1="-19.002" x2="42.52" y2="-19.002"/>
        <line fill="none" stroke="#7F7F7F" stroke-width="0.5" x1="0" y1="-10.557" x2="42.52" y2="-10.557"/>
        <line fill="none" stroke="#7F7F7F" stroke-width="0.5" x1="0" y1="-2.111" x2="42.52" y2="-2.111"/>
    </g>
</g>

<pattern  id="SVGID_2_" xlink:href="#SVGID_1_" patternTransform="matrix(1.366 -1.366 -1.366 -1.366 5463.3882 -24086.0156)">
</pattern>

    <path fill="url(#SVGID_2_)" stroke="#231F20" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
    M219.217,110.146c0-59.729-48.405-108.133-108.133-108.133C51.355,2.013,2.949,50.418,2.949,110.146
    c0,59.611,48.406,108.133,108.135,108.133C170.812,218.279,219.217,169.759,219.217,110.146L219.217,110.146z"/>

我做错了什么或者这是firefox中的一个错误。有人可以帮忙吗？

Answer 1

您的第一个模式块缺少结束</pattern>，但我不确定这是否是复制/粘贴错误。

您是否可以在线提供该文件，因为我们可以为您提供进一步的帮助。

Answer 2

我有一个similar problem，当我们的网站（实际上是localhost:3000）用Chrome浏览器而不是Firefox或Safari浏览时，会显示一个模式。奇怪的是，我能够在所有具有小型本地{{file：}}测试用例的浏览器上使其正常工作，但如果网址为{{http：}}则不行。我可以通过添加{{}}来打破{{file：}}测试用例。

因此，所有证据都指向Safari未正确解析url(#SVGID_2_)作为对某些情况下在同一文件中定义的ID的引用。

SVG模式不适用于Firefox和使用chrome

2 个答案: