SVG：多边形图案填充不适用于Chrome
[英]SVG: Polygon pattern fill doesn't work with Chrome
问题描述
我正在开发一个基本上动态生成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模式不显示在页面上的问题相同，但我使用的是嵌入图像的数据网址，因此我甚至没有引用任何外部资源。
我很感激任何暗示，因为我无法弄清楚如何让它发挥作用。
2 个解决方案
解决方案1
1 已采纳 2016-02-27 09:17:37
这似乎是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
解决方案2
-2 2016-02-27 07:35:09
defs块应该在多边形定义之前。 一切都应该好。
Opera™是SVG的最佳浏览器。
SVG 模式中的 SVG foreignObject 不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.