4

どうすればこれを達成できますか？

関数にSVGを取得しましたが、キャンバスの上でSVGを透明にするにはどうすればよいですか？現在、すべての機能がキャンバスで機能しています。しかし、SVGが追加および削除機能を実行できることがわかりました。どうすればそれについて行くことができますか？

function Add() {
    var id = Math.floor(Math.random()*101+1);
        x = Math.random() * 550;
        y = Math.random() * 250;
    if (document.getElementById('amount').value < 50){
        document.getElementById('amount').value++;
        svg = document.getElementById("main");


        // construct uniqueid for the images
        uniqueid = "frog" + document.getElementById('amount').value;

        //namespaces for SVG
        svgNS="http://www.w3.org/2000/svg";
        xlinkNS="http://www.w3.org/1999/xlink";

        // create a image element
        image = document.createElementNS(svgNS, 'image');

        // set id and other attributes
        image.setAttributeNS(null, "id", uniqueid);
        image.setAttributeNS(xlinkNS, "href","jef-frog.gif");
        image.setAttributeNS(null, "x", x);
        image.setAttributeNS(null, "y", y);
        image.setAttributeNS(null, "width", "50");
        image.setAttributeNS(null, "height", "50");

        // append to svg
        svg.appendChild(image);

    } else {
        alert("we got 50");
    }
}
4

1 に答える 1

3

SVG要素の透明性について質問していると仮定する<image>と、それは問題なく機能します。

デモ： http： //jsfiddle.net/XBCEK/

デモのスクリーンショット

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink">
  <image xl:href="http://phrogz.net/tmp/alphaball.png"
         x="20" y="30" width="128" height="128" />
  <image xl:href="http://phrogz.net/tmp/hand.gif"
         x="220" y="30" width="32" height="32" />
</svg>​

そのSVGを次のCSSとともにページに埋め込んだ場合：

body { background:url(http://phrogz.net/tmp/grid.gif) }
svg  { background:rgba(255,0,0,0.3) /*…*/ }

…すると、次のことがわかります。

  • SVGの背景はデフォルトで透明です。ページの背景（グリッド）が透けて見えるように、不透明度の低い色の背景を提供することもできます。
  • 8ビットの透明度PNG（ボール）と1ビットの透明度GIF（手）の両方の背景により、SVG/ページの背景が正しく透けて見えます。</ li>
于 2012-05-17T22:38:46.043 に答える