javascript - 使用fabricjs在svg文件中查找组ID

Question

我有一个 svg 文件。文件中有许多组（参见“示例 SVG 文件”），我不知道文件中有多少第一级组。使用fabricjs如何找出svg文件中的组数，如结果（参见“我正在寻找的结果”）？

示例 SVG 文件：

<g id="group1">
    <rect id="rect1" x="0" y="0" fill="#00FF00" width="10" height="10"/>
    <rect id="rect2" x="10" y="10" fill="#FF0000" width="10" height="10"/>
    <rect id="rect3" x="20" y="20" fill="#0000FF" width="10" height="10"/>
</g>

我正在寻找的结果：

#found 3 group ID's:
group1
group2
group3

Answer 1

我不知道 Fabric，但我假设您可以在必要时使用 javascript，如下所示...

var svg = document.getElementById("mainsvg");

var groupCount = 0;
var childNodes = svg.childNodes;
var childNumber = childNodes.length;

for( a=0; a<childNumber; a++ ) {

    if( childNodes[ a ].localName == 'g' ) {
        console.log( childNodes[a].attributes.id.value );
        groupCount++; 
    }
}

console.log( groupCount );

这里有一个小提琴.. http://jsfiddle.net/5RyZK/3/（您可能想先检查它是否有一个 id 并将其推送到一个数组或其他东西。