SVG：多边形图案填充不适用于 Chrome

Question

我正在从事一个基本上动态生成 SVG 图像的项目。我注意到当它生成一个带有位图图案填充的多边形时，它不会在 Chrome 中填充该多边形，但它确实在 Firefox 中按预期工作。这是一个精简的例子：

<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <svg version="1.1" viewBox="0 0 12347 10442" preserveAspectRatio="none" width="350pt" height="296pt" style="border: none;">
            <svg x="0" y="0" width="12347" height="10442" viewBox="0 0 12347 10442" preserveAspectRatio="none">
                <polygon points="8748,2151 10124,2151 10124,2293 8748,2293 8748,2151" fill-rule="evenodd" fill="url(#pat)"></polygon>
                <defs>
                    <pattern id="pat" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse">
                        <image x="0" y="0" width="8" height="8" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/bmp;base64,Qk1uAAAAAAAAAD4AAAAoAAAACAAAAAgAAAABAAEAAAAAAAgAAAASCwAAEgsAAAAAAAAAAAAA////ABGAAADdAAAAdwAAAN0AAAB3AAAA3QAAAHcAAADdAAAAdwAAAAAAAAAAAAAAAAAAAAAAAAA="></image>
                    </pattern>
                </defs>
            </svg>
        </svg>
    </body>
</html>

我不太明白为什么它不起作用，或者我做错了什么。 ~~我认为这可能是与 SVG Pattern Doesn't Show on Page 相同的问题，但我使用的是嵌入图像的数据 url，所以我什至没有引用任何外部资源。~~

感谢任何提示，因为我一直无法弄清楚如何让它工作。

Answer 1

defs 块应该在多边形定义之前。到时候应该就好了。

Opera™ 是最适合 SVG 的浏览器。

Answer 2

这似乎是 Chrome 中的错误。经过一些试验，Chrome 似乎选择 (?) 不渲染小于 0.5 像素的图像。不幸的是，这打破了模式。

使用您设置的 viewBox，每个 8x8 图案位图都在以下位置呈现：

8 * 350pt / 12347 = 0.3px

如果将 viewBox 坐标除以 10，并对多边形执行相同操作，则图案（以及位图）将绘制成 10 倍大并且图案呈现正常 - 尽管比您想要的要大。

<svg viewBox="0 0 1234.7 1044.2" width="350pt" height="296pt">
  <polygon points="874.8,215.1 1012.4,215.1 1012.4,229.3 874.8,229.3 874.8,215.1" fill-rule="evenodd" fill="url(#pat)"></polygon>
  <defs>
    <pattern id="pat" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse">
      <image x="0" y="0" width="8" height="8" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/bmp;base64,Qk1uAAAAAAAAAD4AAAAoAAAACAAAAAgAAAABAAEAAAAAAAgAAAASCwAAEgsAAAAAAAAAAAAA////ABGAAADdAAAAdwAAAN0AAAB3AAAA3QAAAHcAAADdAAAAdwAAAAAAAAAAAAAAAAAAAAAAAAA="></image>
    </pattern>
  </defs>
</svg>

我已将此问题报告给 Chrome 开发人员。

https://bugs.chromium.org/p/chromium/issues/detail?id=590447

SVG：多边形图案填充不适用于 Chrome

SVG: Polygon pattern fill doesn't work with Chrome

html

svg

google-chrome

fill