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://ift.tt/PGV9lw" 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.
Aucun commentaire:
Enregistrer un commentaire