我有一個 SVG，其中包含一個使用<image>. 這個包含的影像是像素藝術，我希望它顯示像素化。
但相反它顯示模糊。
我可以更改顯示幕使其像素化嗎？
最小測驗用例：
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image
width="100"
height="100"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAAD0lEQVR4AWP48OotAwMDAA3tAsiMG69RAAAAAElFTkSuQmCC"
/>
</svg>里面是一個尺寸為兩個像素寬和一個像素高的 PNG。
這是它在 macOS 12.1 (21C52) / Safari 15.2 (17612.3.6.1.6) 上的顯示方式。
但我希望它看起來像這樣：
uj5u.com熱心網友回復：
使用樣式設定<image>元素可以image-rendering: pixelated達到預期的結果：
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image style="image-rendering: pixelated;" width="100" height="100" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAAD0lEQVR4AWP48OotAwMDAA3tAsiMG69RAAAAAElFTkSuQmCC" />
</svg>該
image-renderingCSS屬性設定的影像縮放演算法。該屬性適用于元素本身、在其其他屬性中設定的任何影像及其后代。— MDN 網路檔案：影像渲染
請注意，這在 Safari 中似乎無法正確呈現。
uj5u.com熱心網友回復：
好吧，正確的方法是使用image-rendering: pixelated- 但 Safari 尚不支持。
在那之前 - 此過濾器將適用于黑白像素藝術 - 將所有 RG 和 B 值轉換為 0 到 127 -> 0 以及從 128 到 255 -> 255 的所有值。（如果您已按比例放大了所需的抗鋸齒功能）要擠壓，您應該<feFuncA type="discrete" tableValues="0 1"/>在過濾器中的 feFunc 串列中添加另一個）。
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" color-interpolation-filters="sRGB">
<defs>
<filter id="crispen">
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 1"/>
<feFuncG type="discrete" tableValues="0 1"/>
<feFuncB type="discrete" tableValues="0 1"/>
</feComponentTransfer>
</filter>
</defs>
<image
filter="url(#crispen)"
width="100"
height="100"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAAD0lEQVR4AWP48OotAwMDAA3tAsiMG69RAAAAAElFTkSuQmCC"
/>
</svg>您還可以通過為 tableValues 指定不同的陣列將其推廣到雙色調像素藝術。如果您的深色調是 rgb(40,60,70) 而您的淺色調是 rgb (250,200,180) 那么您的 feComponentTransfer 將是：
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0.156 .98"/>
<feFuncG type="discrete" tableValues="0.235 .784"/>
<feFuncB type="discrete" tableValues="0.274 .706"/>
</feComponentTransfer>
（例如 - 當你將較低的紅色值 40 統一時 - 你得到 40/255 = .156）
請注意，這僅在所有 RGB 上下值低于和高于 127.5 時才有效。例如，如果您的淺色調是 rgb(200,50,50) 而您的深色調是 (50,60,60) - 那么這將導致錯誤的答案。在這種情況下，您必須創建一個更長（更復雜）的 tableValues 陣列，以便將源顏色轉換為正確的目標顏色。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/402336.html
標籤：
上一篇：如何在SVG中繪制帶角的矩形