0

我为 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>

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

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

4

3 回答 3

0

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

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

Firefox 中存在一个错误，它没有正确处理具有单个值的离散 tableValues，该错误已在 edge.xml 中修复。

于 2013-02-15T17:50:12.330 回答
0

这个怎么样？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"/>
于 2013-02-14T16:18:25.973 回答
0

一旦我将图像替换为实际存在的图像，例如另一个小提琴中的图像，它就可以在 Firefox 上完美运行：

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

如果您正在使用其他一些 UA 并且它不起作用，那么也许您应该在它使用的任何错误跟踪器上提出一个错误。

您是否意识到您还缺少第二把小提琴中的 feFuncA feComponentTransfer 孩子？

于 2013-02-14T11:06:47.140 回答