-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstep5.html
57 lines (53 loc) · 2.86 KB
/
step5.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Angular SVG demo</title>
<link rel="stylesheet" href="demo.css">
</head>
<body ng-app="myApp">
<div ng-controller="SvgCtrl">
<h1>{{greeting}}</h1>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="mysvg">
<defs>
<g id="mustache">
<path transform="translate(-230, -140) scale(0.5)" d="m726,248l-1,0l0,1l-1,0l0,0l0,1l0,0l0,0l-1,0l0,0l0,1l-1,0l0,0l0,1l-2,0l-1,0l0,-1l1,-1l0,-1l0,-1l1,0l0,0l0,-1l1,0l0,0l0,-1l0,0l0,0l1,-1l1,-1l0,0l0,0l0,-1q0,0 3,-2q2,-3 10,-7q8,-4 17,-4q10,0 16,3q7,3 15,9q7,6 14,15q7,9 10,19q3,11 3,22q0,12 -3,22q-3,11 -11,22q-6,11 -14,18q-8,7 -21,14q-13,8 -30,12q-17,6 -37,8q-19,2 -44,0q-26,0 -54,-6q-28,-6 -52,-14q-24,-8 -42,-18q-17,-10 -26,-18q-10,-8 -12,-9q-2,-1 -6,2q-3,3 -16,13q-13,10 -31,18q-18,8 -43,16q-24,8 -54,13q-30,5 -50,6q-19,1 -28,-1q-9,0 -28,-5q-20,-5 -34,-11q-13,-6 -22,-12q-9,-8 -16,-17q-8,-10 -12,-22q-4,-12 -5,-25q-1,-12 1,-20q2,-7 6,-17q6,-10 9,-13q4,-4 4,-5q0,-1 2,-2q2,-1 11,-6q9,-5 20,-5q12,0 20,3l8,3l0,1l0,0l1,0l0,1l0,0l1,0l0,0l0,0l1,1l1,1l0,0l0,0l1,0l0,0l0,1l1,0l0,1l0,1l-2,0l-3,-1l-1,0l-1,0l0,-1l-1,0l0,0l0,-1l-4,0q-3,-2 -11,-1q-8,1 -14,5q-5,5 -9,12q-4,7 -4,20q0,14 4,19q3,5 8,8q5,3 14,3q10,0 24,-6q15,-6 38,-19q24,-13 47,-27q24,-14 41,-22q18,-8 30,-10q13,-4 29,-3q16,1 31,5q15,6 26,13q12,7 13,8q1,1 12,-7q11,-8 26,-12q15,-6 22,-6q7,-2 25,-1q18,1 32,4q13,3 32,13q19,10 55,34q36,24 49,28q12,6 23,6q11,0 19,-4q8,-4 12,-8q4,-5 4,-17q0,-12 -4,-19q-4,-7 -9,-12q-5,-4 -9,-6q-5,-2 -12,-2q-6,0 -10,3q-3,3 -4,3z" stroke-width="1px" stroke="#010101" fill-rule="evenodd" fill="#010101" id="svg_2"/>
</g>
</defs>
<text x="200" y="100" class="textStyle">{{svgText}}</text>
<use xlink:href="#mustache" ng-repeat="circle in circles" ng-attr-transform="translate({{circle.cx}}, {{circle.cy}}) scale({{circle.r/100}})"></use>
</svg>
<div class="controls">
<h2>Text</h2>
<input type="text" ng-model="svgText">
<div ng-repeat="circle in circles">
<h2>Mustache {{$index + 1}}</h2>
<label for="cx">X</label>
<input id="cx" type="number" ng-model="circle.cx" /><br>
<label for="cy">Y</label>
<input id="cy" type="number" ng-model="circle.cy" /><br>
<label for="r">Scale (%)</label>
<input id="r" type="number" ng-model="circle.r" />
</div>
</div>
</div>
<script type="text/javascript" src="http://code.angularjs.org/1.2.0rc1/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp',[]);
function SvgCtrl($scope) {
$scope.greeting = 'Movember is coming.';
$scope.svgText = 'Hello';
$scope.circles = [
{cx: 100,cy: 100, r: 100},
{cx: 200,cy: 400,r: 50},
{cx: 300,cy: 300,r: 70},
{cx: 600,cy: 600,r: 150}
];
}
</script>
</body>
</html>