我正在尝试了解如何应用svg opacity，以便我可以添加透明度并随后将其删除，并获取原始图像。
我开发了以下测试用例，其中我有256个细胞以红色强度增加。
原件没有不透明度 然后我直接在每个svg单元格上使用脚本添加不透明度 然后我使用过滤器通过删除alpha通道来删除不透明度
第三张图像应与第一张图像相同。它没有。当您查看第1个和第3个框时，删除Alpha通道的图像中的分辨率明显降低。
这种情况发生在Chrome和Edge中，如下图所示
Cell color changed as a result of adding transparency
是否可以在不更改原始图像的情况下，将任意Alpha通道添加到图像并通过滤镜删除？
var svgns = "http://www.w3.org/2000/svg";
var svg = document.getElementById("colormap");
var cellSize = 10;
var colCount = 16
for (let r = 0; r < 256; r++) {
var cell = document.createElementNS(svgns, "rect");
var x = (r % colCount)
var y = Math.trunc(r/colCount)
cell.setAttributeNS(null, "x", x * cellSize);
cell.setAttributeNS(null, "y", y * cellSize);
cell.setAttributeNS(null, "width", cellSize);
cell.setAttributeNS(null, "height", cellSize);
let Alpha = (r+1)/256
let hexColor = "#" + r.toString(16).padStart(2,"0") + "0000";
cell.setAttributeNS(null, "fill-opacity", Alpha);
cell.setAttributeNS(null, "fill", hexColor);
svg.appendChild(cell);
}
var svg = document.getElementById("colormapNoAlpha");
for (let r = 0; r < 256; r++) {
var cell = document.createElementNS(svgns, "rect");
var x = (r % colCount)
var y = Math.trunc(r/colCount)
cell.setAttributeNS(null, "x", x * cellSize);
cell.setAttributeNS(null, "y", y * cellSize);
cell.setAttributeNS(null, "width", cellSize);
cell.setAttributeNS(null, "height", cellSize);
hexColor = "#" + r.toString(16).padStart(2,"0") + "0000";
cell.setAttributeNS(null, "fill", hexColor);
cell.setAttributeNS(null, "fill-opacity", 1);
svg.appendChild(cell);
}<html lang="en">
<head>
<meta charset="UTF-8">
<title>Alpha Layers</title>
</head>
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
width="880" height="240"
viewBox="0 0 880 240" >
<defs>
<!-- Pattern Definition -->
<pattern id="checkerPattern" patternUnits="userSpaceOnUse"
x="0" y="0" width="20" height="20"
viewBox="0 0 10 10" >
<line x1="0" y1="0" x2="10" y2="0" stroke="lightblue" fill="none" stroke-dasharray="2,2" />
<line x1="0" y1="0" x2="0" y2="10" stroke="lightblue" fill="none" stroke-dasharray="2,2" />
<rect x1="0" y1="0" width="20" height="20" stroke="lightblue" fill="black" stroke-dasharray="2,2" />
</pattern>
<!-- Filter Definition -->
<g id="colormapNoAlpha"></g>
<g id="colormap"></g>
<filter id="original" color-interpolation-filters="sRGB">
<feColorMatrix in="SourceGraphic" result="img2"
type="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0 "/>
</filter>
<filter id="removeAlpha" color-interpolation-filters="sRGB">
<feColorMatrix in="SourceGraphic" result="img2"
type="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 0 1 "/>
</filter>
<filter id="selectAlpha" color-interpolation-filters="sRGB">
<feColorMatrix in="SourceGraphic" result="img2"
type="matrix"
values="0 0 0 1 0
0 0 0 1 0
0 0 0 1 0
0 0 0 0 1 "/>
</filter>
</defs>
<!-- Background -->
<rect x="0" y="0" width="100%" height="100%" fill="url(#checkerPattern)" />
<!-- Result -->
<g>
<use x="020" y="020" id="in" xlink:href="#colormapNoAlpha"/>
<use x="220" y="020" id="in" xlink:href="#colormap"/>
<!-- filter="url(#removeAlpha)" -->
<use x="420" y="020" id="out1" xlink:href="#colormap" filter="url(#removeAlpha)" />
<use x="640" y="020" id="out1" xlink:href="#colormap" filter="url(#selectAlpha)" />
<text x="020" y="220" font-family="Verdana" font-size="20" fill="white">Original</text>
<text x="220" y="220" font-family="Verdana" font-size="20" fill="white">Original Alpha</text>
<text x="420" y="220" font-family="Verdana" font-size="20" fill="white">Remove Alpha</text>
<text x="640" y="220" font-family="Verdana" font-size="20" fill="white">Only Alpha</text>
</g>
</svg>
</div>
</body>
</html>