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>

注意：我使用的是 Safari 5.1

4

1 回答 1

2

您创建<text>元素的方式将其放入错误的命名空间。创建一个字符串然后通过 .append() 解析它会将元素放入 HTML 命名空间，而不是 SVG 命名空间。

<svg>您必须在解析之前和之前包装您的字符串</svg>，然后将生成的根节点的子节点附加到<svg>DOM 中的元素。

于 2012-10-30T08:13:47.120 回答