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

画像を実際に存在するもの、たとえば他のフィドルのものに置き換えると、 Firefoxで完全に正常に動作します。

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

他の UA を使用していて、それが機能しない場合は、使用しているバグ トラッカーにバグを報告する必要があります。

2 番目のフィドルで feFuncA feComponentTransfer の子も欠落していることに気付きましたか?

于 2013-02-14T11:06:47.140 に答える
0

feFuncR tableValues を "1 1" に変更するだけで、Firefox で修正されました。

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

個別の tableValues を単一の値で正しく処理しないという Firefox のバグがありましたが、これは Edge で修正されました。

于 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 に答える