Question

我有一个 SVG ，其中矩形中包含 text 。我想在一些用户交互中更改文本。

我遇到的大部分代码都是这样的：（示例代码用于添加圆圈）

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

Answer 1

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

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

即时向SVG添加元素，添加到HTML DOM但未呈现的元素

1 个答案: