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

【问题标题】：SVG: Polygon pattern fill doesn't work with ChromeSVG：多边形图案填充不适用于 Chrome
【发布时间】：2023-03-20 10:55:01
【问题描述】：

我正在开发一个基本上动态生成 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，所以我什至没有引用任何外部资源。~~

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

【问题讨论】：

标签： html google-chrome svg fill

【解决方案1】：

这似乎是 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

【讨论】：

【解决方案2】：

defs 块应该在多边形定义之前。那么一切都会好起来的。

Opera™ 是最好的 SVG 浏览器。

【讨论】：

根据 SVG 规范，defs 块不需要在之前，所以您是说这是 Chrome 错误吗？如今，Opera 和 Chrome 使用相同的渲染引擎。
我之前在 Chrome 上也遇到过类似的问题，这是它的语言解析方面的一个缺陷。
我的意思是，您应该在回答中明确表示您认为这是 Chrome 的限制/错误，而不是 SVG 规范强加的要求。