gpt4 book ai didi

javascript - 使用 JavaScript 将子节点添加到内联 SVG。在 IE9 上不可能?

转载 作者:行者123 更新时间:2023-12-04 02:15:02 26 4
gpt4 key购买 nike

我只想使用 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com