我只想使用 accion() javaScript 函数在 html 上的 SVG 中添加一个新的文本节点:
<!DOCTYPE>
<html>
<body>
<head>
<script type="text/javascript">
function accion(){
var SVGDocument = document.getElementById("idSVG");
var text2 = SVGDocument.createTextNode("text");
SVGDocument.appendChild(text2);
}
</script>
</head>
<input type="button" onclick="accion()" value="GO!!"/>
<svg id="idSVG">
<text id="texto" x="50" y="35" font-size="14">PRUEBA</text>
</svg>
</body>
</html>
但是 SVGDocument.createTextNode("text"); 返回错误:对象不支持此属性或方法。我认为问题是我无法正确引用 idSVG 元素。我正在使用 IE9。
最佳答案
下面的例子适合我。
请注意，如果您不设置 y 坐标默认值 0，则 0 可能在 svg 边界框之外。
<!DOCTYPE>
<html>
<body>
<head>
<script type="text/javascript">
function accion(){
var svg = document.getElementById("idSVG");
var text2 = document.createElementNS("http://www.w3.org/2000/svg", "text");
text2.setAttribute("y", "100");
var textContent = document.createTextNode("this is the text content");
text2.appendChild(textContent);
svg.appendChild(text2);
}
</script>
</head>
<input type="button" onclick="accion()" value="GO!!"/>
<svg id="idSVG">
<text id="texto" x="50" y="35" font-size="14">PRUEBA</text>
</svg>
</body>
</html>
关于javascript - 使用 JavaScript 将子节点添加到内联 SVG。在 IE9 上不可能？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14749983/