| 
    
 Draft for Information Only 
    Content
    SVG Hierarchy Tree  SVG Dot Line  SVG Dot Line  Sources and References
 
    
SVG Hierarchy Tree
Examples of SVG hierarchy tree image by SVG  
    <path> SVG Dot Line
    Example of a SVG dot line HTML+SVG Code Input:<?xml version="1.0" standalone="no"?>
    
<svg width='400' height='300' version='1.1' xmlns='http://www.w3.org/2000/svg'>
   <style>
   	.f01 {fill: #DAA520}
   	.f02 {fill: #FFD700}
   	.f03 {fill: #AFEEEE}
   	.f04 {fill: #C0C0C0}
   	path {stroke:black; stroke-width:1; vector-effect:non-scaling-stroke}
   	text {text-anchor: middle;}
   </style>
   <path d='M200 50 V250'/>
   <defs>
   <path id='box_1_22' d='M0 0 H1 V22 H0Z'/>
   <use href='#box_1_22' id='box_1_44' transform='scale(1,2)' />
   <g id='headedbox'>
   <use href='#box_1_22' class='f01'/>
   <use href='#box_1_22' class='f02' transform='translate(0,22)'/>
   </g>
   </defs>
   <g transform='translate(200 50) translate(-74,-22)'>
   <use href='#headedbox' transform='scale(148,1)'/>
   <text x='74' y='15'>System.Web.UI.Page</text>
   </g>
   <g transform='translate(200 120) translate(-50,-22)'>
   <use href='#box_1_44' class='f04' transform='scale(100,1)'/>
   <text x='50' y='25'>.aspx page</text>
   </g>
   <g transform='translate(200 190) translate(-56,-22)'>
   <use href='#headedbox' transform='scale(112,1)'/>
   <text x='56' y='15'>Generated class</text>
   </g>
   <g transform='translate(200 260) translate(-55,-22)'>
   <use href='#box_1_44' class='f03' transform='scale(110,1)'/>
   <text x='55' y='25'>Output page</text>
   </g>
</svg>
    
  HTML Web Page Embedded Output:  
SVG Dot Line
    Example of a SVG dot line HTML+SVG Code Input:<?xml version="1.0" standalone="no"?>
    
<svg width='400' height='700' version='2' xmlns='http://www.w3.org/2000/svg'>
   <style>
	.f01 {fill: #DAA520}
	.f02 {fill: #FFD700}
	.f03 {fill: #AFEEEE}
	.f04 {fill: #C0C0C0}
	.t01 {font-size:16px; text-anchor: middle;}
	.d01 {stroke-dasharray:5}
	text {font-size:12px}
	path, rect {stroke:black; stroke-width:1; vector-effect:non-scaling-stroke}
   </style>
   <path d='M100 100 V143'/>
   <text id='txt1' x='105' y='138'>Inherits from</text>
   <use href='#txt1' x='35' y='350'/>
   <path d='M130 443 V625'/>
   <path fill='transparent' d='M25 143 h260 v300 h-260Z'/>
   <path fill='transparent' d='M370 100 V380 H310 M370 380 V530 H260'/>
   <text id='txt2' x='318' y='372'>generates</text>
   <use href='#txt2' x='-50' y='150'/>
   <defs>
   <path id='box_1_22' d='M0 0 H1 V22 H0Z'/>
   <use href='#box_1_22' id='box_1_44' class='f03' transform='scale(1,2)' />
   <g id='headedbox'>
   <use href='#box_1_22' id='box_f01_1_22' class='f01'/>
   <use href='#box_1_22' id='box_f02_1_22' class='f02' transform='translate(0,22)'/>
   </g>
   </defs>
   <g transform='translate(100 100) translate(-74,-22)'>
   <use href='#headedbox' transform='scale(148,1)'/>
   <text class='t01' x='74' y='15'>System.Web.UI.Page</text>
   </g>
   <g transform='translate(310 34) translate(-80,-22)'>
   <use href='#box_1_22' class='f04' transform='scale(160,1)'/>
   <text class='t01' x='80' y='15'>MyPage.aspx</text>
   <use href='#box_f02_1_22' transform='translate(0,-66) scale(160,4)'/>
   <text x='5' y='40'><% Page Inherits='MyPage'%></text>
   <text x='5' y='55'><!--...--></text>
   <text x='5' y='70'> </text>
   <text x='5' y='85'><asp:button id='b1'... ></text>
   <text x='5' y='100'><asp:textbox id='tb1'... ></text>
   </g>
   <g transform='translate(2 184) translate(0,-22)'>
   <use href='#box_1_22' class='f04' transform='scale(260,1)'/>
   <text class='t01' x='130' y='15'>MyPage.aspx.cs (or MyPage.aspx.vb)</text>
   <use href='#box_f02_1_22' transform='translate(0,-66) scale(260,4)'/>
   <text x='5' y='40'>public partial class MyPage : Page</text>
   <text x='5' y='55'>{</text>
   <text x='5' y='70'><tspan dx='10' xml:space='preserve'>protected void b1_Click()</tspan></text>
   <text x='5' y='85'><tspan dx='20' xml:space='preserve'>{ // user code}</tspan></text>``
   <text x='5' y='100'>}</text>
   </g>
   <g class='d01' transform='translate(52 334) translate(0,-22)'>
   <use href='#box_f01_1_22' transform='scale(260,1)'/>
   <text class='t01' x='130' y='15'>Generated partial class from .aspx file</text>
   <use href='#box_f02_1_22' transform='translate(0,-66) scale(260,4)'/>
   <text x='5' y='40'>public partial class MyPage</text>
   <text x='5' y='55'>{</text>
   <text x='5' y='70'><tspan dx='10' xml:space='preserve'>protected TextBox tb11;</tspan></text>
   <text x='5' y='85'><tspan dx='10' xml:space='preserve'>protexted Button b1</tspan></text>``
   <text x='5' y='100'>}</text>
   </g>
   <g class='d01' transform='translate(2 484) translate(0,-22)'>
   <use href='#box_f01_1_22' class='f04' transform='scale(260,1)'/>
   <text class='t01' x='130' y='15'>Generated final class</text>
   <use href='#box_f02_1_22' transform='translate(0,-66) scale(260,4)'/>
   <text x='5' y='40'>public class MyPage_aspx : MyPage</text>
   <text x='5' y='55'>{</text>
   <text x='5' y='70'><tspan dx='10' xml:space='preserve'>{  // control tree)</tspan></text>
   <text x='5' y='85'><tspan dx='10' xml:space='preserve'>}</tspan></text>``
   <text x='5' y='100'>}</text>
   </g>
   <g transform='translate(130 625) translate(-55,-22)'>
   <use href='#box_1_44' transform='scale(110,1)'/>
   <text class='t01' x='55' y='25'>Output page</text>
   </g>
</svg>
    
  HTML Web Page Embedded Output:  
Sources and References
 
 
     ©sideway 
    ID: 211000009 Last Updated: 10/9/2021 Revision: 0 Ref:  
      
References
 
-  http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999 
 
 
 
  
    
            | 
      |