作爲容器的SVG元素？

Question

我有一個由svg rect標籤製成的矩形，現在想嵌入一個圓圈。我發現svg元素不能包含子元素，或者我猜我會得到適當的例子。請讓我知道是否可以將一個元素作爲一個孩子放入另一個元素，然後可見。可能是更高的Z指數？如何使用拉斐爾？

Answer 1

只需將該圓圈添加爲rectange的後續兄弟，並將其繪製在頂部。如果你想讓矩形在圓圈後面畫圓。它被稱爲油漆工模型，因爲你最後繪製的任何東西都是最重要的。

SVG目前沒有z-index屬性，雖然有建議將它添加到即將推出的SVG 2.0規範中。

如果您想了解SVG那裏，如果你有興趣創建複雜的形狀是一個online primer

Answer 2

，paths提供了很多的可能性。您可以獲得rect和circle基元具有的持久狀態，屬性可塑性和交互性（單擊，懸停，拖動），但對區域複雜性沒有限制。

作爲一個額外的好處，聰明地選擇路徑，你可以從一個形狀乾淨地變形到另一個。例如，檢查this fiddle。

有很多用於構建複雜路徑的輔助工具...對於大多數項目，Google的SVG-edit就足夠了。

Answer 3

SVG組標籤<g>看起來像是最容易與HTML的<div>容器標籤等效。

從https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g：

的克元件是用於組對象的容器。應用於g元素的轉換在其所有子元素上執行。

允許內容：任意數量的以下元素中的，以任何順序