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

我正在开发一个基本上可以动态生成SVG图像的项目。我注意到，当它生成一个带有位图模式填充的多边形时，它不会在Chrome中填充该多边形，但它在Firefox中按预期工作。这里是一个精简的例子：SVG：多边形图案填充不适用于Chrome

<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，所以我甚至没有引用任何外部资源。~~

我很感激任何提示，因为我一直无法弄清楚如何让这个工作。

来源

2016-02-27 user2129246

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

与已设置视框，每个8×8模式的位图的是应呈现：

8 * 350pt/12347 = 0.3px

如果除以10的视框COORDS，并做了多边形的图案相同（和因此位图）被绘制得大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

来源

2016-02-27 09:17:37

-2

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

Opera™是SVG最好的浏览器。

来源

2016-02-27 07:35:09

的DEFS块不需要是根据SVG规范，这样，你说这是Chrome错误之前？ Opera和Chrome现在使用相同的渲染引擎。 –

我以前遇到过类似的Chrome问题，这是它语言解析中的一个缺点。 –

我的观点是，你应该在你的答案中明确指出你认为这是Chrome的限制/错误，而不是SVG规范要求的要求。 –

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

回答

相关问题