Question

基本上，我无法从SVG中获取元素text：

panel =  document.getElementById("panel");
g = panel.getElementById("gtext");
t = g.getElementById("text");

t.textContent = "hello";

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink= "http://www.w3.org/1999/xlink" width="80" height="80" id="panel">    
    <g id="gtext" transform="translate(0,48) scale(1 1)">
        <text id="text">
           XXXXXXXXXXXXXXXXXXX
        </text>    
    </g>
</svg>

检查员说组gtext没有getElementById功能

我的目标是更改text。

的内容

以下是CodePen Example：

Answer 1

来自Documentation：

与其他类似方法不同，getElementById仅作为全局document对象的方法提供，并且不能作为DOM中所有元素对象的方法。由于ID值在整个文档中必须是唯一的，因此不需要该函数的“本地”版本。

这就是为什么当你尝试将getElementById作为DOM中某个元素的函数调用时，它会在控制台中抛出错误。

由于DOM元素的id在单个文档中应该是唯一的，您可以使用：

t = document.getElementById("text");

工作示例：

t = document.getElementById("text");

t.textContent = "hello";

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink= "http://www.w3.org/1999/xlink" width="80" height="80" id="panel">    
    <g id="gtext" transform="translate(0,48) scale(1 1)">
        <text id="text">
           XXXXXXXXXXXXXXXXXXX
        </text>    
    </g>
</svg>

或者，您可以使用.querySelector()。这可用作全局document对象的方法以及DOM中的所有元素对象。

您可以使用以下变体：

panel =  document.querySelector("#panel");
g = panel.querySelector("#gtext");
t = g.querySelector("#text");

t.textContent = "hello";

工作示例：

panel =  document.querySelector("#panel");
g = panel.querySelector("#gtext");
t = g.querySelector("#text");

t.textContent = "hello";

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink= "http://www.w3.org/1999/xlink" width="80" height="80" id="panel">    
    <g id="gtext" transform="translate(0,48) scale(1 1)">
        <text id="text">
           XXXXXXXXXXXXXXXXXXX
        </text>    
    </g>
</svg>

修改

感谢@PaulLeBeau：

.getElementById()也可用作SVGSVGElement的方法。如果我们在DOM中引用了一个SVG元素，我们就可以访问它。例如：

var svg = document.getElementById('my-svg'); var t = svg.getElementById("text");

但是，此方法不适用于DOM内的SVG以外的任何元素。

工作示例：

var svg = document.getElementById('my-svg'); var t = svg.getElementById("text"); t.textContent = 'hello';

<svg id="my-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" width="80" height="80" id="panel"> <g id="gtext" transform="translate(0,48) scale(1 1)"> <text id="text"> XXXXXXXXXXXXXXXXXXX </text> </g> </svg>

Answer 2

getElementById()不是可用于组元素的函数。您需要使用document.getElementById()，或者可以从<svg>元素调用它。

var mysvg = getElementById("mysvg");
var t = mysvg.getElementById("text");

或者，如果您已经引用了group元素，则可以使用ownerSVGElement属性来获取组的祖先SVG元素。然后从那里拨打getElementById()。

g = panel.getElementById("gtext");
...
mysvg = g.ownerSVGElement;
t = mysvg.getElementById("text");

Element.getElementById（）不起作用

2 个答案: