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的问题相同，但我使用的是嵌入图像的数据网址，因此我甚至没有引用任何外部资源。~~

我很感激任何提示，因为我无法弄清楚如何让它发挥作用。

Answer 1

这似乎是Chrome中的一个错误。经过一些实验，Chrome浏览器选择（？）不渲染小于0.5像素的图像。不幸的是，这是打破模式。

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

8 * 350pt / 12347 = 0.3px

如果将viewBox coords除以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

Answer 2

defs块应该在多边形定义之前。一切都应该好。

Opera™是SVG的最佳浏览器。

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

2 个答案: