Question

我有一个类似于此的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>

我需要能够用textarea中的用户生成的字符串替换节点。我写了一个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>

Answer 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;

Answer 2

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

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

PS。请注意，textarea标识为userbox，但在JS中使用saveBox

使用javascript将字符串替换为html节点

2 个答案: