Fig#1 |
Folder-Tree
is a subcomponent of the Canvas (or Draw Area) |
|
|
||
Fig#2 |
Folder-Tree
and Canvas (or Draw Area) are siblings in the Web Page |
|
Fig#3 |
|
|
Fig#4 |
|
|
The Fig#1
places the Folder-Tree component inside the drawing area. In this
case the relation ship is Container-component and Subcomponent. For
example: <g transform="translate(0, 0)"> // This Group Includes the code to present the Canvas and its Subcomponent. <g transform="translate(100, 50)"> // This Group Includes the code to present the Folder-tree and its Subcomponent. </g> </g> The Fig#2 places the
Folder-Tree component top of the drawing area. In this case they
are siblings. For example: Note: If two components are siblings and they are overlapping, then one that is included later part of the document would appears on top. As one may expect, the SVG-viewer may start processing the SVG-document from the top and draws first component first. Then the second component on top of the first component and so on. |