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
|
|