Question

我为SVG图像创建了一个阴影，使用纯SVG可以正常工作（参见a live demo）：

<!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，使用以下代码（请参阅a live demo）：

<!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>

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

我无法找到方法让它像预期的那样变红，任何想法？

Answer 1

在Firefox once I replace the image上运行完全正常，其中一个实际存在，例如在另一个小提琴中的那个：

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

如果你正在使用其他一些UA并且它不起作用那么也许你应该在它使用的任何bug跟踪器上引发一个bug。

你是否意识到你还错过了第二小提琴中的feFuncA feComponentTransfer孩子？

Answer 2

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

用feComponentTransfer替换feColorMatrix：

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

Answer 3

只需将feFuncR tableValues更改为“1 1” - 现在它已在Firefox中修复。

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

Firefox中存在一个错误，它没有正确处理具有单个值的离散tableValues，这些错误已经在边缘修复。

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

3 个答案: