Question

我已经基于w3规范实现了SVG过滤器，当我将结果与Chrome，Firefox和Illustrator中呈现的SVG进行比较时，我发现某些过滤器的输入颜色似乎是平方的，输出颜色似乎是通过平方根，虽然阿尔法值不。例如，规范似乎说具有离散函数的feComponentTransfer过滤器可以像这样实现：

outputColor = tableValues[floor(inputColor * tableValues.length)]

但我提到的应用程序计算如下：

outputColor = sqrt(tableValues[floor(inputColor * inputColor * tableValues.length)])

如果您打开此svg文件，则可以看到它：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="500" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" baseProfile="full">
     <defs>
        <linearGradient id="redBlack">
            <stop stop-color="red" offset="0%"/>
            <stop stop-color="black" offset="100%"/>
        </linearGradient>
        <linearGradient id="blueBlack">
            <stop stop-color="blue" offset="0%"/>
            <stop stop-color="black" offset="100%"/>
        </linearGradient>
        <linearGradient id="greenBlack">
            <stop stop-color="lime" offset="0%"/>
            <stop stop-color="black" offset="100%"/>
        </linearGradient>
        <linearGradient id="transparentBlack">
            <stop stop-color="rgba(0,0,0,0)" offset="0%"/>
            <stop stop-color="black" offset="100%"/>
        </linearGradient>
        <g id="gradientImage">
            <rect x="0" y="0" width="500" height="50" fill="url(#redBlack)"/>
            <rect x="0" y="50" width="500" height="50" fill="url(#blueBlack)"/>
            <rect x="0" y="100" width="500" height="50" fill="url(#greenBlack)"/>
            <rect x="0" y="150" width="500" height="50" fill="url(#transparentBlack)"/>
        </g>
        <filter id="componentDiscrete" x="0%" y="0%" width="100%" height="100%">
            <feImage xlink:href="#gradientImage" result="test1" />
            <feComponentTransfer in="test1">
                <feFuncR type="discrete" tableValues="0,0.2,0.4,0.6,0.8,1"/>
                <feFuncG type="discrete" tableValues="0,0.2,0.4,0.6,0.8,1"/>
                <feFuncB type="discrete" tableValues="0,0.2,0.4,0.6,0.8,1"/>
                <feFuncA type="discrete" tableValues="0,0.2,0.4,0.6,0.8,1"/>
            </feComponentTransfer>
        </filter>
     </defs>
     <rect x="0"  y="0" width="500" height="200" filter="url(#componentDiscrete)"/>
</svg>

我也在fe湍流中看过它。我使用规范中的代码实现了它，但是我必须对该代码的输出进行平方以获得与我尝试过的应用程序相匹配的结果。

为什么对输入求平方并取输出的根？

为什么SVG滤波器的输出颜色是平方的？

0 个答案: