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.