1

我有一个与此类似的 HTML 文档。

<html>
    <body>
            <h1>My Embeded SVG</h1>
            <p>This is my html page with some embedded SVG</p>
            <svg id="mySVG"></svg>
            <textarea id="userbox"></textarea>
            <input type="button" value="Replace" OnClick="replaceText()"/> 
    </body>
</html>

我需要能够用来自文本区域的用户生成的字符串替换节点。我编写了一个 JavaScript 函数来执行此操作....但是，它替换了整个 HTML 文档。

function replaceText(){
    var allText = document.getElementById("userbox").value;
    var newDoc = document.open("text/svg", "replace");
    newDoc.write(allText);
    newDoc.close();
}

有什么方法可以替换 SVG 节点。

来自用户的文本将与此类似。

<svg id="mySVG" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="javascript" d="M 448 0 L 1045 0 L 896 40 L 846 159 L 746 378 z" fill="rgba(092,000,214,0.36)" stroke="black"></path></svg>
4

2 回答 2

1

你可以这样做：

<h1>My Embeded SVG</h1>
<p>This is my html page with some embedded SVG</p>
<div id="svgContainer">
    <svg id="mySVG"></svg>
</div>
<textarea id="userbox"></textarea>
<input type="button" value="Replace" OnClick="replaceText()"/>

javascript是这样的：

// replace below line with the real variable coming from the user input.
var strFromUser = '<svg id="mySVG" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="javascript" d="M 448 0 L 1045 0 L 896 40 L 846 159 L 746 378 z" fill="rgba(092,000,214,0.36)" stroke="black"></path></svg>'

var container = document.getElementById("svgContainer");

container.innerHTML = strFromUser;
于 2013-04-09T11:01:40.987 回答
0

您不应该使用write()或writeln()在页面呈现后使用。这确实会清除整个页面。

您需要做的是将SVG放在 a<DIV>或其他标签中。然后getElementById()，并用用户输入的值DIV更改它。innerHTML

附言。当心你有textareaid userbox，但在你使用的 JS 中saveBox

于 2013-04-09T10:56:42.553 回答