SVG: Polygon pattern fill doesn't work with Chrome
Question
I'm working on a project that essentially generates a SVG image dynamically. 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. 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.
I'm grateful for any hints as I haven't been able to figure out how to get this to work.
2 answers
solution1
1 ACCPTED 2016-02-27 09:17:37
This seems to be a bug in Chrome. After some experimenting, it appears Chrome chooses (?) not to render images smaller than 0.5 pixels. Unfortunately this is breaking patterns.
With the viewBox you have set, each of the 8x8 pattern bitmaps is being rendered at:
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.
<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.
https://bugs.chromium.org/p/chromium/issues/detail?id=590447
solution2
-2 2016-02-27 07:35:09
The defs block should be BEFORE the polygon definition. All should be well then.
Opera™ is the best Browser for SVG.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.