Fig#1

Folder-Tree is a subcomponent of the Canvas (or Draw Area)

The Folder Tree component is contributed by Mr. Philippe Elsass at  http://consume.free.fr/svg/samples/tree.svg.

This is a great component, but unfortunately not designed to be used as subcomponent. It used absolute coordinate system, so the scroll bar acts funny, if the component is placed at any location other than X-Y location (0,0).

For more details please view Tree-Page

Fig#2

Folder-Tree and Canvas (or Draw Area) are siblings in the Web Page
(Scroll the Canvas to notice that Tree is on top of the Draw Area)

Fig#3


Folder-Tree is a subcomponent of the Canvas at (0,0)

Fig#4


Folder-Tree is On top of the Scroll Drawing area Component at (0,0)

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:
<g transform="translate(0, 0)">
           // This Group Includes the code to present the Canvas and its Subcomponent.
</g>

<g transform="translate(100, 50)">
          // This Group Includes the code to present the Folder-tree and its Subcomponent.
</g>

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.