1

包含模式的 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中的错误。有人可以帮忙吗？

4

3 回答 3

0

我有一个类似的问题，当我们的网站（实际上localhost:3000）是用 Chrome 而不是 Firefox 或 Safari 查看时出现的一种模式。奇怪的是，我能够通过一个小的本地 {{file:}} 测试用例使其在所有浏览器上正常工作，但如果 URL 显示 {{http:}} 则不能。我可以通过添加 {{}} 来打破 {{file:}} 测试用例。

因此，所有证据都表明 Safariurl(#SVGID_2_)在某些情况下无法正确解析为对同一文件中定义的 id 的引用。

于 2014-08-30T06:23:52.677 回答
0

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

您能否在线提供该文件，因为这样我们可能会为您提供进一步的帮助。

于 2013-11-04T11:35:55.807 回答
0

我注意到在 Firefox 中，模式必须在使用它的代码之前呈现。

我不知道你用的是什么技术，但是在使用 React 的时候，必须先渲染带有模式的组件，然后再渲染使用这种模式的组件。

于 2021-10-08T06:08:41.347 回答