gpt4 book ai didi

javascript - 如何在 svg 的 标签中获取内部标签?

转载 作者:太空狗 更新时间:2023-10-29 15:55:52 26 4
gpt4 key购买 nike

我正在使用 SVG <g>使用 JavaScript 的标签。我需要在每个 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> .我应该如何进行?

最佳答案

Grabbing a Child(呃,我可以这样写吗?)

首先,获取 <g> 的所有 child 标签,你可以使用 childNodes属性(big example here):

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

然后您可以抓取每个 child 的边界框来抓取宽度/高度。我会使用 getBBox方法(source):

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

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

这是 an example Fiddle显示如何从 child 那里获取属性。


多个 child

这是另一个例子 Fiddle获取每个 <g> 的所有 child 的宽度标记——或查看下面的相关代码:

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只选择 child ( Docs )。谢谢,Eric !


设置属性

请注意,如果您只想更改宽度,则无需抓取边界框;你可以只使用 setAttribute方法(source)。例如,如果您想将第一个 child 的宽度设置为 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每个 child 的方法(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

关于javascript - 如何在 svg 的 <g> 标签中获取内部标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24803812/

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