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

Latest Updated LinksValid XHTML 1.0 Transitional Valid CSS!Nu Html Checker Firefox53 Chromena IExplorerna
IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 8

Culture

Chinese 1097

English 339

Reference 79

Computer

Hardware 249

Software

Application 213

Digitization 32

Latex 52

Manim 205

KB 1

Numeric 19

Programming

Web 289

Unicode 504

HTML 66

CSS 65

SVG 46

ASP.NET 270

OS 429

DeskTop 7

Python 72

Knowledge

Mathematics

Formulas 8

Algebra 84

Number Theory 206

Trigonometry 31

Geometry 34

Coordinate Geometry 2

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-2024 Sideway . All rights reserved Disclaimers last modified on 06 September 2019