Sideway
output.to from Sideway
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'>&#60;% Page Inherits='MyPage'%&#62;</text>
   <text x='5' y='55'>&#60;!--...--&#62;</text>
   <text x='5' y='70'> </text>
   <text x='5' y='85'>&#60;asp:button id='b1'... &#62;</text>
   <text x='5' y='100'>&#60;asp:textbox id='tb1'... &#62;</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:

close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
close
IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 8

Culture

Chinese 1097

English 337

Reference 68

Computer

Hardware 154

Software

Application 207

Digitization 25

Latex 35

Manim 203

Numeric 19

Programming

Web 285

Unicode 504

HTML 65

CSS 63

SVG 9

ASP.NET 240

OS 422

DeskTop 7

Python 64

Knowledge

Mathematics

Formulas 8

Algebra 84

Number Theory 206

Trigonometry 31

Geometry 32

Coordinate Geometry 1

Calculus 67

Complex Analysis 21

Engineering

Tables 8

Mechanical

Mechanics 1

Rigid Bodies

Statics 92

Dynamics 37

Fluid 5

Fluid Kinematics 5

Control

Process Control 1

Acoustics 19

FiniteElement 2

Natural Sciences

Matter 1

Electric 27

Biology 1

Geography 1


Copyright © 2000-2021 Sideway . All rights reserved Disclaimers last modified on 06 September 2019