javascript 如何在svg的<g>标签中获取内部标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24803812/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get Inner tags in <g> tags in svg?
提问by VIVEK-MDU
I am working with SVG<g>tags using JavaScript. I need get the inner tags (eg: rect, path, etc) in each of the <g>tags.
我正在使用 JavaScript处理SVG<g>标签。我需要得到内标签（如：rect，path等），在每一个的<g>标签。
This is what I used to get a particular tag.
这是我用来获取特定标签的方法。
var stess = selectedElement.getElementsByTagName('rect');
console.log(stess);
But I have dynamic tags as well. how should I retrieve the values of the inner tags? More so, how could I change the width of these inner tags?
但我也有动态标签。我应该如何检索内部标签的值？更重要的是，我怎样才能改变这些内部标签的宽度？
Here is the code that I tried:
这是我尝试过的代码：
$('.test').change(function() {
console.log(selectedElement.children()); // Results Error
}
I end up logging <g id="xxx" fill-opacity="1" stroke-opacity="1"><rect></g>. How should I proceed?
我最终登录<g id="xxx" fill-opacity="1" stroke-opacity="1"><rect></g>。我应该如何进行？
回答by Casey Falk
Grabbing a Child(er, can I write that?)
抢孩子（呃，我可以写吗？）
First, to grab all of the children of a <g>tag, you could use the childNodesattribute (big example here):
首先，要获取<g>标签的所有子项，您可以使用childNodes属性（这里的大例子）：
var allGs = document.getElementsByTagName('g');
var firstG = allGs[0];
var firstChild = firstG.childNodes[0];
Then you could grab each child's bounding box to grab the width/height. I'd use the getBBoxmethod (source):
然后你可以抓住每个孩子的边界框来抓住宽度/高度。我会使用getBBox方法（源）：
var boundingBox= firstChild.getBBox();
var width = boundingBox.width
For more on bounding boxes, check out the docs.
有关边界框的更多信息，请查看文档。
Here's an example Fiddleshowing how to get the attribute from a child.
这是一个示例Fiddle，展示了如何从孩子那里获取属性。
Multiple Children
多个孩子
And here's another example Fiddlethat grabs the widths of all the children of each <g>tag -- or see the relevant code below:
这是另一个示例Fiddle，它获取每个<g>标签的所有子项的宽度——或者查看下面的相关代码：
var allGs = document.getElementsByTagName('g');
for (var i=0; i<allGs.length; i++) {
var gElem = allGs[i];
var children = gElem.children;
// `children` is an array of the form [child, child, ...].
for (var j=0; j < children.length; j++){
var child = children[j];
var box = child.getBBox();
var width = box.width;
//... Now do whatever you wanted to do with the width.
}
}
Note: element.childNodeswill collect unwanted whitespace between children elements; element.childrenonly selects the children (Docs). Thanks, Eric!
注意：element.childNodes将收集子元素之间不需要的空格；element.children只选择孩子（Docs）。谢谢，埃里克！
Setting Attributes
设置属性
A quick note that if all you want to do is change the width, you don't need to grab the bound box; you can just use the setAttributemethod (source). For example, if you wanted to set the width of the first child to 100px:
请注意，如果您只想更改宽度，则无需抓取绑定框；你可以只使用setAttribute方法（源）。例如，如果您想将第一个孩子的宽度设置为 100px：
//A condensed version of the "firstChild" retrieval from before:
var firstChild = document.getElementsByTagName('g')[0].childNodes[0];
var newWidth = 100;
firstChild.setAttribute("width", newWidth)
Retrieving Attributes
检索属性
Regarding retrieving other "values" -- that depends on what you mean. If you want an attribute, then you could just use the getAttributemethod (documentation) of each child instead of grabbing the BBox's width (SO post with examples). That is done in a similar way to how we setsan attribute in the code snippet above:
关于检索其他“值”——这取决于你的意思。如果你想要一个属性，那么你可以只使用每个孩子的getAttribute方法（文档）而不是抓取 BBox 的宽度（SO post with examples）。这与我们在上面的代码片段中设置属性的方式类似：
//A condensed version of the "firstChild" retrieval from before:
var firstChild = document.getElementsByTagName('g')[0].childNodes[0];
var value = firstChild.getAttribute("src")
// ... Now do what you will with that value.
回答by sadiq.ali
You can use CSS child selectors in jQuery to get the required elements.
您可以在 jQuery 中使用 CSS 子选择器来获取所需的元素。
var rects = $('g > rect');
var circles = $('g > rect');
var paths = $('g > rect');
This will select the dynamic elements also which exits at the time of execution of this statement.
这也将选择在执行此语句时退出的动态元素。
For example to change all rect widths.
例如更改所有矩形宽度。
$('g > rect').each(function(){
$(this).attr("width","10");
console.log($(this));
});
You can say,
你可以说，
for each(var childElement in selectedElement.childNodes)
{
console.log(childElement)
}
This will give you individual child elements from the array.
这将为您提供数组中的各个子元素。
