svg过滤器计算分辨率答案

【问题标题】：svg filter calculation resolutionsvg过滤器计算分辨率
【发布时间】：2018-04-20 20:55:50
【问题描述】：

我正在对一系列图像应用 svg 过滤器，看起来过滤器在其计算中仅使用颜色的 4 个最高有效位，其余的被忽略并且对结果没有影响。有没有办法强制过滤器在其计算中包含所有 8 个颜色位。

为了说明我的问题，我创建了一个代码笔，它构建了一组 256 个红细胞，仅以红色从 0 增加到 256 强度。然后我 svg 使用线性比例过滤单元格，将每个单元格颜色的位值乘以 128。

我应该看到前两个三个单元格（位值 0、1、2）为 0、128 和 256 强度红色，其余的应该是 256 红色。

我看到的是，十进制值小于 8 的一切都是 0 强度。

这表明前三位在 svg 计算中被忽略了。为什么会这样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Threshold</title>
</head>
<body>
<div>
    <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
             width="1200" height="1024"
             viewBox="0 0 1200 1024" >

      <defs>

          <g id="colormap"></g>

          <!-- Filter Definition -->


         <filter id="linearred">
          <feComponentTransfer>
            <feFuncR type="linear" slope="128" intercept="0"/>
          </feComponentTransfer>
         </filter>


      </defs>
        <g>
            <use id="source" xlink:href="#colormap"/>
            <use y="200"  id= "redoption2" xlink:href="#colormap" filter="url(#linearred)" />
        </g>

    </svg>
</div>
<script>

        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);

                    RcolorHex = r.toString(16).padStart(2,"0");

                    hexColor = "#" + RcolorHex + "0000";
                    console.log(x, y, r, RcolorHex);
                    cell.setAttributeNS(null, "fill", hexColor);
                    svg.appendChild(cell);
                }

</script>
</body>
</html>

【问题讨论】：

我无法提供帮助，但请注意，Chrome 和 Firefox 的输出不同。
感谢您检查其他浏览器的提醒。我刚试过边缘，它工作正常。但是，Firefox 和 chrome 存在仅处理四个最高有效位的问题。

标签： svg svg-filters

【解决方案1】：

您的问题是由于过滤器使用不同的颜色空间进行操作。它们使用 LinearRGB，而其他颜色操作（例如混合到屏幕）使用 sRGB。

解决方案是将滤镜设置为使用 sRGB。

color-interpolation-filters="sRGB"

<div>
    <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.2/DTD/svg11.dtd">
    <svg xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
             width="1200" height="1024"
             viewBox="0 0 1200 1024" >

      <defs>

          <g id="colormap"></g>
          
          <!-- Filter Definition -->

         
         <filter id="linearred" color-interpolation-filters="sRGB">
          <feComponentTransfer>
            <feFuncR type="linear" slope="128" intercept="0"/>
          </feComponentTransfer>
         </filter>
          
          
      </defs>
        <g>
            <use id="source" xlink:href="#colormap"/>
            <use y="200"  id= "redoption2" xlink:href="#colormap" filter="url(#linearred)" />
        </g>

    </svg>
</div>
<script>

        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);

                    RcolorHex = r.toString(16).padStart(2,"0");

                    hexColor = "#" + RcolorHex + "0000";
                    //console.log(x, y, r, RcolorHex);
                    cell.setAttributeNS(null, "fill", hexColor);
                    svg.appendChild(cell);
                }

</script>

实际上是 IE/Edge 出了问题，而不是 Chrome 和 Firefox :)

【讨论】：