SVG：多边形图案填充不适用于Chrome
[英]SVG: Polygon pattern fill doesn't work with Chrome
问题描述
I'm working on a project that essentially generates a SVG image dynamically. 
我正在开发一个基本上动态生成SVG图像的项目。 I noticed that when it generates a polygon with a bitmap pattern fill, it doesn't fill that polygon in Chrome, but it does work as expected in Firefox. 我注意到，当它生成带有位图图案填充的多边形时，它不会在Chrome中填充该多边形，但它确实在Firefox中按预期工作。 Here is a stripped down example: 这是一个精简的例子：
<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>
I can't quite figure out why it doesn't work, or what I'm doing wrong. 我无法弄清楚为什么它不起作用，或者我做错了什么。 I think this may be the same question as SVG Pattern Doesn't Show on Page but I am using a data url that embeds the image, so I'm not even referencing any external resources. 我认为这可能与SVG模式不显示在页面上的问题相同，但我使用的是嵌入图像的数据网址，因此我甚至没有引用任何外部资源。
I'm grateful for any hints as I haven't been able to figure out how to get this to work. 我很感激任何暗示，因为我无法弄清楚如何让它发挥作用。
2 个解决方案
解决方案1
1 已采纳 2016-02-27 09:17:37
This seems to be a bug in Chrome. 这似乎是Chrome中的一个错误。 After some experimenting, it appears Chrome chooses (?) not to render images smaller than 0.5 pixels. 经过一些实验，Chrome浏览器选择（？）不渲染小于0.5像素的图像。 Unfortunately this is breaking patterns. 不幸的是，这是打破模式。
With the viewBox you have set, each of the 8x8 pattern bitmaps is being rendered at: 使用您设置的viewBox，每个8x8模式位图将在以下位置呈现：
8 * 350pt / 12347 = 0.3px
If you divide the viewBox coords by 10, and do the same for the polygon, the pattern (and hence the bitmap) is drawn 10x larger and the pattern renders okay - albeit larger than you want. 如果将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>
I have reported this issue to the Chrome devs. 我已将此问题报告给Chrome开发者。
https://bugs.chromium.org/p/chromium/issues/detail?id=590447 https://bugs.chromium.org/p/chromium/issues/detail?id=590447
解决方案2
-2 2016-02-27 07:35:09
The defs block should be BEFORE the polygon definition. defs块应该在多边形定义之前。 All should be well then. 一切都应该好。
Opera™ is the best Browser for SVG. Opera™是SVG的最佳浏览器。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.