-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcode1.html
93 lines (91 loc) · 3.8 KB
/
code1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<html>
<head>
<title>My first HTML perros!</title>
</head>
<body>
<h1>Hello world</h1>
<!--Predefined svgs-->
<div>
<h2>This is the first svg - a circle</h2>
<center>
<svg width="400" height="200">
<circle cx="200" cy="100" r="90"
style="fill:#ffe599; stroke:black; stroke-width:1px"/>
</svg>
</center>
</div>
<div>
<h2>This is the second svg - an ellipse</h2>
<svg width="400" height="200">
<ellipse cx="100" cy="100" rx="100" ry="50"
style="fill:#ffe599; stroke:black; stroke-width:1px"/>
</svg>
</div>
<div>
<h2>This is the third svg - a rectangle</h2>
<svg width="400" height="200">
<rect x="100" y="20" width="200" height="100"
style="fill:#ffe599; stroke:black; stroke-width:1px"/>
</svg>
</div>
<!--Personalizing multiple objects with a specific configuration-->
<div>
<h2>This is the fourth and i am doing lines</h2>
<style>
.lines{stroke:#5b5b5b; stroke-width:5px}
</style>
<svg width="400" height="200">
<line class="lines" x1="30" y1="30" x2="200" y2="80"/>
<line class="lines" x1="30" y1="50" x2="150" y2="120"/>
</svg>
</div>
<div>
<h2>Text in a svg</h2>
<svg width="300" height="55">
<!--A text in a svg -_- -->
<text x="30" y="30">Some dummie text here</text>
<text x="30" y="50">More text that belongs to an image (?)</text>
</svg>
</div>
<div>
<h2>Now, fifth - curved lines</h2>
<svg width="400" height="200">
<path style="stroke:#5b5b5b; fill:none"
d="M 10 10 L 50 10 L 50 50 L 100 50 L 100 10 C 150 50 150 50 150 10"/>
<path style="stroke:#7c5c7c; fill:none; stroke-width: 2px"
d="M 50 50 L 80 50 L 100 100 L 150 100 L 150 50 C 200 100 200 0 200 50"/>
<circle cx="150" cy="10" r="2" style="fill:aqua"/>
</svg>
</div>
<!--More than one figure in a svg-->
<div>
<h2>Ordering figures, top on visualization id the one in the bottom in code</h2>
<svg width="400" height="200">
<!--Rectangle on top-->
<ellipse cx="100" cy="100" rx="100" ry="50"
style="fill:blueviolet; stroke:black; stroke-width:1px"/>
<rect x="100" y="20" width="200" height="100"
style="fill:#ffe599; stroke:black; stroke-width:1px"/>
</svg>
</div>
<div>
<h2>Transforming a group</h2>
<h3>Moves the whole group to the right and down, scaled to half in the x component and flip it in the vertical and scale it to the half in the vertical</h3>
<svg width="300" height="100">
<g transform="translate(100, 100) scale(0.5, -0.5)">
<ellipse cx="100" cy="100" rx="100" ry="50" style="fill:blueviolet; stroke:black; stroke-width:1px"/>
<rect x="100" y="20" width="200" height="100" style="fill:#ffe599; stroke:black; stroke-width:1px"/>
</g>
</svg>
</div>
<div>
<h2>Notes:</h2>
<ol>
<li>All things in a svg are a group, referenced to the same coordinates</li>
<li>Text in a svg is text</li>
<li>It is possible to use directly hex colors</li>
<li>Texts groups can also be translated and flipped</li>
</ol>
</div>
</body>
</html>