This repository has been archived by the owner on Feb 10, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
76 lines (70 loc) · 3.96 KB
/
index.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
<html>
<head>
<style>
svg{
border: 1px solid black;
height: 600px;
width: 400px;
}
.center{
text-align: center;
}
</style>
</head>
<body>
<!-- <button onclick="javascript:setTool('r-rect')">Create</button> -->
<h1 class="center">Riot SVG</h1>
<div style="float: left">
<h2>RIOT SVG </h2>
<r-svg >
<rect x="10" y="10" width="256" height="64" rx="5" ry="5" draggable="true" fill="red"></rect>
<g name="blue" data-is="r-rect" x="10" y="80" width="256" height="64" rx="5" ry="5" draggable="true" resizable="true" fill="blue"></g>
<g name="green" data-is="r-rect" x="30" y="330" width="256" height="64" rx="5" ry="5" draggable="true" fill="green"></g>
<g name="yellow" data-is="r-rect" x="70" y="150" width="125" height="50" rx="5" ry="5" fill="yellow"></g>
<g>
<g name="pink" data-is="r-rect" x="70" y="430" width="125" height="50" rx="5" ry="5" fill="pink" draggable="true" resizable="true" ></g>
<g name="white" data-is="r-rect" x="5" y="20" width="105" height="45" rx="5" ry="5" fill="brown" draggable="true" resizable="true"></g>
</g>
</r-svg>
</div>
<div style="float: left">
<h2>HTML SVG </h2>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" width="256" height="64" rx="5" ry="5" draggable="true" fill="red"></rect>
<g name="blue" data-is="r-rect" x="10" y="80" width="256" height="64" rx="5" ry="5" draggable="true" resizable="true" fill="blue"></g>
<g name="green" data-is="r-rect" x="30" y="430" width="256" height="64" rx="5" ry="5" draggable="true" fill="green"></g>
<g name="yellow" data-is="r-rect" x="70" y="150" width="125" height="50" rx="5" ry="5" fill="yellow"></g>
<g>
<g>
<g name="pink" data-is="r-rect" x="70" y="430" width="125" height="50" rx="5" ry="5" fill="pink" draggable="true" resizable="true" ></g>
<g name="white" data-is="r-rect" x="5" y="20" width="105" height="45" rx="5" ry="5" fill="brown" draggable="true" resizable="true"></g>
</g>
</g>
</svg>
</div>
<div style="float: left">
<h2>HTML SVG </h2>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" width="256" height="64" rx="5" ry="5" draggable="true" fill="red"></rect>
<g name="blue" data-is="r-rect" x="10" y="80" width="256" height="64" rx="5" ry="5" draggable="true" resizable="true" fill="blue"></g>
<g name="green" data-is="r-rect" x="30" y="430" width="256" height="64" rx="5" ry="5" draggable="true" fill="green"></g>
<g name="yellow" data-is="r-rect" x="70" y="150" width="125" height="50" rx="5" ry="5" fill="yellow"></g>
<g>
<g>
<g name="pink" data-is="r-rect" x="70" y="430" width="125" height="50" rx="5" ry="5" fill="pink" draggable="true" resizable="true" ></g>
<g name="white" data-is="r-rect" x="5" y="20" width="105" height="45" rx="5" ry="5" fill="brown" draggable="true" resizable="true"></g>
</g>
</g>
</svg>
</div>
<script src="js/external/riot.min.js"></script>
<script src="js/elements.js"></script>
<script>
riot.mount("*");
var toolName = "";
function setTool(name){
toolName = name;
}
</script>
</body>
</html>