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 9

Culture

Chinese 1097

English 339

Travel 38

Reference 79

Hardware 55

Computer

Hardware 259

Software

Application 213

Digitization 37

Latex 52

Manim 205

KB 1

Numeric 19

Programming

Web 290new

Unicode 504

HTML 66new

Common Color 1new

Html Entity (Unicode) 1new

Html 401 Special 1

CSS 65new

Selector 1

SVG 46

ASP.NET 270

OS 447new

MS Windows

Windows10 1new

.NET Framework 1

DeskTop 7

Python 72

Knowledge

Mathematics

Formulas 8

Set 1

Logic 1

Algebra 84

Number Theory 207new

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