在SVG文件中遍歷子節點的問題

2021-04-12 12:21:27 字數 1729 閱讀 2578

在svg文件中遍歷子節點的問題

相信很多使用adobe svg viewer(asv)進行svg程式設計的都遇到過這個問題,在使用節點遍歷時,返回的節點數總是有些奇怪,例如在svg文件中如果寫入:

by their

by their

然後使用如下**取該組下的子節點數量:

var elem = svgdocument.getelementbyid("choices");

var nodes = elem.childnodes;

alert(nodes.length);

我們期望返回的個數為3,包括乙個注釋和兩個文字節點,但asv實際返回為7。網上有些文件解釋如下:

childnodes中子節點列表的序號是從1開始,並且以2遞增的。因此訪問的方式為

for(var i = 1;i < ((nodes.length-1));i = i+2)

事實上這是不對的,在asv中,節點下的空白也作為乙個節點計算,因此上面的節點還要加上四個空白節點,因此是7個。如果我們在svg中以不換行的方式寫上述節點,

by their

by their

這時返回的節點數是3。在這種情況下,上面的**就有問題了。特別是在我們動態生成svg圖形時,這個問題比較比較明顯了。例如在原始的svg文件中有:

然後在指令碼中,使用createelementns在組中動態建立幾個矩形圖形節點:

var group = svgdocument.getelementbyid("choices ");

for(var i=0; i < 3; i++)

此時組中的子節點數量為4(三個矩形節點和乙個空白節點),對矩形子節點的遍歷就應當是:

var elem = svgdocument.getelementbyid("choices");

var nodes = elem.childnodes;

for(var i = 1; i < nodes.length ;i ++)

但如果原始的文件中寫為

在動態建立子節點後,組中子節點數量為3,對矩形子節點的遍歷的遍歷為:

var elem = svgdocument.getelementbyid("choices");

var nodes = elem.childnodes;

for(vari = 0; i < nodes.length ;i ++)

可見遍歷迴圈的條件取決於原始文件中節點的寫法,這是我們不希望的。因此,正確的方法是,

總是遍歷所有子節點,然後根據節點的名稱進行過濾。

var elem = svgdocument.getelementbyid("choices ");

var nodes = elem.getchildnodes;

for(i = 0;i < nodes.length ;i ++)

或者var elem = svgdocument.getelementbyid("choices ");

var nodes = elem.getchildnodes;

for(i = 0;i < nodes.length ;i ++)

}

OSG中的父節點與子節點

osg中的父節點與子節點 osg主要包含3大基本類節點,即node geode group。osg中其他的大部分節點都繼承自group節點,少部分繼承自node節點及geode節點,但geode和group均繼承自node節點。geode葉節點,可以包含幾何體資訊。可以用它來繪製圖形,在應用程式中,...

svg在vue cli3中的配置

svg向量圖有時候在專案中用起來當然要比用起來好。之前沒有用過svg,這次花了一點時間在專案中支援了svg的使用,個人感覺用起來還是沒有直接用font class的爽,然後又改成font class的使用,如下我說一下我是如何配置svg和font class的 這兩者都是iconfont 的不同使用...

js找出中序遍歷的下乙個子節點

給定乙個二叉樹和其中的乙個結點,請找出中序遍歷順序的下乙個結點並且返回。注意,樹中的結點不僅包含左右子結點,同時包含指向父結點的指標。下圖中序遍歷為 dbfegac 1.當前節點可能為上圖的d,則下乙個節點為b,return b 2.當前節點可能為上圖的g,則下一節點為a,return afunct...