使用JavaScript构建SVG颜色阴影过滤器时失败

SVG color-shadow filter fails when built with JavaScript

本文关键字：过滤器 失败 阴影 颜色 JavaScript 构建 SVG 使用      更新时间：2023-09-26

我为SVG图像创建了一个阴影，使用纯SVG效果良好（请参见实时演示）：

<!DOCTYPE html>
<html>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
            <defs>
                <filter id="drop">
                    <feComponenttransfer result="offOut" in="SourceAlpha">
                        <feFuncA type="linear" />
                        <feFuncR type="discrete" tablevalues="1" />
                        <feFuncG type="discrete" />
                        <feFuncB type="discrete" />
                    </feComponentTransfer>
                    <feOffset result="shadow" dx="67" dy="0" in="offOut" />
                    <feGaussianBlur stdDeviation="8" result="blurOut" in="shadow" />
                    <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
                </filter>
            </defs>
            <g>
                <g filter="url(#drop)">
                    <image x="10" y="100" width="440" height="60" xlink:href="/images/pulpit.jpg"
                    preserveAspectRatio="defer"></image>
                </g>
            </g>
        </svg>
    </body>
</html>

正如预期的那样，这里的图像是用红色阴影创建的，但我尝试通过JavaScript创建和修改SVG，使用以下代码（请参见实时演示）：

<!DOCTYPE html>
<html>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="sv">
            <rect width="90" height="90" stroke="green" stroke-width="3" fill="rgba(255,25,8,1)"
            />
            <g id="gr">
                <image x="10" y="100" width="440" height="60" xlink:href="/images/pulpit.jpg"
                preserveAspectRatio="defer"></image>
            </g>
        </svg>
    </body>
    <script>
        var feoffset = document.createElementNS("http://www.w3.org/2000/svg", "feOffset");
        var feGaussianBlur = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur");
        var filter = document.createElementNS("http://www.w3.org/2000/svg", "filter");
        var definition = document.createElementNS("http://www.w3.org/2000/svg", "defs");
        filter.setAttribute("id", "fPicture5");
        filter.setAttribute("filterUnits", "userSpaceOnUse");
        feoffset.setAttribute("result", "shadow");
        feoffset.setAttribute("in", "offOut");
        feoffset.setAttribute("dx", "67");
        feoffset.setAttribute("dy", "0");
        feGaussianBlur.setAttribute("result", "blurOut");
        feGaussianBlur.setAttribute("in", "shadow");
        feGaussianBlur.setAttribute("stdDeviation", "8");
        var feBlend = document.createElementNS("http://www.w3.org/2000/svg", "feBlend");
        var feCTransfer = document.createElementNS("http://www.w3.org/2000/svg", "feComponentTransfer");
        var feFuncR = document.createElementNS("http://www.w3.org/2000/svg", "feFuncR");
        var feFuncG = document.createElementNS("http://www.w3.org/2000/svg", "feFuncG");
        var feFuncB = document.createElementNS("http://www.w3.org/2000/svg", "feFuncB");
        feCTransfer.setAttribute("in", "SourceAlpha");
        feCTransfer.setAttribute("result", "offOut");
        feBlend.setAttribute("in", "SourceGraphic");
        feBlend.setAttribute("in2", "blurOut");
        feBlend.setAttribute("mode", "normal");
        feFuncR.setAttribute("type", "discrete");
        feFuncG.setAttribute("type", "discrete");
        feFuncB.setAttribute("type", "discrete");
        feFuncR.setAttribute("tablevalues", "1");
        feFuncG.setAttribute("tablevalues", "0");
        feFuncB.setAttribute("tablevalues", "0");
        feCTransfer.appendChild(feFuncR);
        feCTransfer.appendChild(feFuncG);
        feCTransfer.appendChild(feFuncB);
        filter.appendChild(feCTransfer);
        filter.appendChild(feoffset);
        filter.appendChild(feGaussianBlur);
        filter.appendChild(feBlend);
        definition.appendChild(filter);
        document.getElementById("sv").appendChild(definition);
        document.getElementById("gr").setAttribute("filter", "url(#fPicture5)");
    </script>
</html>

结果是成功创建了图像，但阴影是黑色的。

我找不到办法让它变成预期的红色，有什么想法吗？

一旦我用实际存在的图像（例如另一个小提琴中的图像）替换图像，在Firefox上就可以很好地工作：

<image x="10" y="100" width="440" height="60" xlink:href="http://placekitten.com/100/80"
preserveAspectRatio="defer"></image>

如果你正在使用其他UA，但它不起作用，那么也许你应该在它使用的任何bug跟踪器上提出一个bug。

你意识到你也错过了feFuncA feComponentTransfer的孩子吗？

这个怎么样？http://jsfiddle.net/WvYpS/

用feColorMatrix:替换feComponentTransfer

<feColorMatrix type="matrix" 
 values="0 0 0 1 0  
         0 0 0 0 0 
         0 0 0 0 0 
         0 0 0 1 0"/>

只需将feFuncR表值更改为"11"-现在它在Firefox中已经修复。

<feFuncR type="discrete" tableValues="1 1" />

Firefox中有一个错误，没有正确地用单个值处理离散表值，该错误已在edge中修复。

相关文章：