如何處理SVG <g>組中的條目？

在文檔中，我可以使用document.getElementById()來獲取特定獨特元素的句柄。如何處理SVG <g>組中的條目？

我該如何對一個組做同樣的處理，作爲參數給出。

<g id="right_hook"> 
    <circle id="wheeltap" r="3" stroke-width="1" /> 
    <path d="M 0 0 L 200 0 A 5,5 0 0,1 200,20" stroke-width="4" /> 
</g>

如果我通過這個羣組功能：

function some(hook) { 
    var tap1= hook.wheeltap; // does not work 
    var tap2= hook.getElementById("wheeltap"); // does not work 
}

是什麼工作？

我這樣做的原因是我有多個類似的對象，我想要在JavaScript中進行動畫製作。我當然可以給他們的每個子對象提供全球唯一的名字（s.a.「right_hook_wheeltap」，「left_hook_wheeltap」，但這很糟糕）。

來源

2009-11-18 akauppi

我可以使用最新的瀏覽器;甚至是瀏覽器特定的。感謝大家的幫助。最終我會使用jQuery，但是我首先不想理解它。 – akauppi 2009-11-19 16:36:26

現在使用jQuery，我會告訴讀者只要在這裏放下，就這樣做。方式更容易。 – akauppi 2009-12-27 10:55:56

getElementById正試圖通過它的唯一ID查找元素。該DOM specification states:

getElementById ...返回元素其ID由elementId給出。如果不存在這樣的元素存在，則返回null。 如果多個元素具有此ID，則不定義行爲。

如果你有你感興趣的鉤子元素的引用，那麼我建議使用getElementsByTagName（它會返回指定標籤名稱元素的集合）：

function some(hook) { 
    var taps = hook.getElementsByTagName("circle"); 
    var tap1 = taps[0]; // should contain the element you're looking for 
    ... 
}

或者，正如Tchaury Bar Yochay所說的，如果jQuery.SVG是一個選項，它會使選擇器更容易處理。

來源

2009-11-18 08:37:50 dariom

我只是看着this one，並認爲可能使用childNodes作爲任務。

例如

getElementById("SVG").childNodes

BTW，看看jQuery.SVG插件（link）

來源

2009-11-18 07:14:02

你也許可以使用Selectors API做這件事，如果你是罰款需要而最近的瀏覽器版本。

你想要什麼似乎是QuerySelector：

var rh = document.getElementById("right_hook"); 
var wheel = rh.querySelector("#wheeltap");

我還沒有證實，它與非唯一ID：■雖然。

來源

2009-11-18 07:37:48

如何處理SVG <g>組中的條目？

回答

相關問題