如何在svg?</g>中的<g>标签中获取内部标签

时间:2014-07-17 12:37:35

标签: javascript html svg

我正在使用JavaScript使用 SVG <g>标记。我需要在每个rect标签中获取内部标签(例如:path<g>等)。

这是我用来获取特定标签的内容。

var stess = selectedElement.getElementsByTagName('rect');
console.log(stess);

但我也有动态标签。我该如何检索内部标签的值?更重要的是,我怎么能改变这些内部标签的宽度?

以下是我尝试过的代码:

$('.test').change(function() {
            console.log(selectedElement.children()); // Results Error
}

我最终记录<g id="xxx" fill-opacity="1" stroke-opacity="1"><rect></g>。我该怎么办?

2 个答案:

答案 0 :(得分:6)

抓住一个孩子(呃,我能写出来吗?)

首先,要抓住<g>代码的所有子代,您可以使用childNodes属性(big example here):

var allGs = document.getElementsByTagName('g');
var firstG = allGs[0];
var firstChild = firstG.childNodes[0];

然后你可以抓住每个孩子的边界框来抓住宽度/高度。我使用getBBox方法(source):

var boundingBox= firstChild.getBBox();
var width = boundingBox.width

有关边界框的更多信息,请查看docs

这是an example Fiddle,展示了如何从孩子那里获取属性。


多个孩子

这是另一个示例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.

 }
}

注意:element.childNodes将在子元素之间收集不需要的空格; element.children仅选择子项(Docs)。谢谢,Eric


设置属性

快速说明如果你想要做的只是改变宽度,你不需要抓住绑定框;您可以使用setAttribute方法(source)。例如,如果要将第一个子项的宽度设置为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)

Example Fiddle


检索属性

关于检索其他“值” - 这取决于你的意思。如果你想要属性,那么你可以使用每个孩子的getAttribute方法(documentation)而不是抓住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.

Example Fiddle

答案 1 :(得分:-1)

您可以在jQuery中使用CSS子选择器来获取所需的元素。

var rects = $('g > rect');
var circles = $('g > rect');
var paths = $('g > rect');

这将选择在执行此语句时退出的动态元素。

例如,更改所有矩形宽度。

$('g > rect').each(function(){
  $(this).attr("width","10");
  console.log($(this));
});

你可以说,

for each(var childElement in selectedElement.childNodes)
{
    console.log(childElement)
}

这将为您提供数组中的各个子元素。