1

長方形内にテキストを含むSVGがあります。ユーザーとのやり取りでテキストを変更したいと思います。

私が遭遇したコードのほとんどは、次のようなことをします:(サンプルコードは円を追加するためのものです）

var shape = document.createElementNS("http://www.w3.org/2000/svg", "circle");
shape.setAttribute("cx", 25);
shape.setAttribute("cy", 25);
shape.setAttribute("r",  20);
shape.setAttribute("fill", "green");

私が使用している間：

function writeSVG() {
        clearSVG();
        var name = document.getElementById('txtName').value;
        var txtNode = '<text id="newTxt" x="300" y="300">' + name + '</text>';
        $('#svgElem').append(txtNode);
        $('#popUp').hide();
    }

//Removes all text from SVG rectangle
    function clearSVG() {
        $('#controls text').remove();
    }

私のSVGはHTMLに直接書き込まれます

 <div id="controls">
        <svg id="svgElem" height="600" xmlns="http://www.w3.org/2000/svg" version="1.1">    Sorry, your browser does not support SVG.
        <rect id="rectSVG" width="500" height="500" style="fill:#FFFFFF;stroke:black;stroke-width:2;" onclick="launchPopUp();" />
       <text id="defaultTxt" x="200" y="200">Click in here!</text>
       </svg>
    </div>

注：Safari5.1を使用しています

4

1 に答える 1

2

要素を作成する方法により、<text>要素が間違った名前空間に配置されます。文字列を作成してから.append（）を介して解析すると、要素はSVG名前空間ではなくHTML名前空間に配置されます。

<svg>解析する前に文字列をラップして</svg>から、結果のルートノードの子を<svg>DOMの要素に追加する必要があります。

于 2012-10-30T08:13:47.120 に答える