SVG 模式不适用于 Firefox 和 chrome答案

【问题标题】：SVG pattern didn't work with firefox and working with chromeSVG 模式不适用于 Firefox 和 chrome
【发布时间】：2013-11-14 20:27:39
【问题描述】：

包含图案的 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 中的一个错误。有人可以帮忙吗？

【问题讨论】：

标签： google-chrome firefox design-patterns svg adobe-illustrator

【解决方案1】：

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

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

【讨论】：

我没有看到文件有任何问题，但其他人可能应该看看。这是一个小提琴：jsfiddle.net/y46px/1
这会让我发疯.. 我认为模式是正确的，但我不知道问题所在这里有一个截图可以描述我所面临的情况:: www.mediafire.com/view/我的文件/#5ou9wkt632hjynx

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：