-
Notifications
You must be signed in to change notification settings - Fork 0
/
snapsvgTest01.html
116 lines (112 loc) · 5.13 KB
/
snapsvgTest01.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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
a {
color: lightgoldenrodyellow;
}
</style>
<script src="libs/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="libs/snapsvg/snap.svg.js"></script>
</head>
<body>
<svg viewBox="0 0 300 300">
<defs>
<radialGradient id="g1" cx="20%" cy="20%" r="100%" fx="30%" fy="30%">
<stop stop-color="white" offset="0"/>
<stop stop-color="rgb(255,0,0)" offset="25%"/>
<stop stop-color="rgb(192,0,0)" offset="50%"/>
<stop stop-color="rgb(127,0,0)" offset="70%"/>
<stop stop-color="rgb(64,0,0)" offset="85%"/>
<stop stop-color="rgb(0,0,0)" offset="100%"/>
</radialGradient>
</defs>
<g transform="translate(150,150)">
<!-- tick -->
<g>
<circle r="108" fill="url(#g1)" stroke-width="4" stroke="none" />
<circle r="97" fill="none" stroke-width="11" stroke="white" stroke-dasharray="4,46.789082" transform="rotate(-1.5)" />
<circle r="100" fill="none" stroke-width="5" stroke="white" stroke-dasharray="2,8.471976" transform="rotate(-.873)" />
</g>
<!-- hands -->
<g id="hands" transform="rotate(180)">
<g id="hour">
<line stroke-width="5" y2="75" stroke-linecap="round" stroke="lightgoldenrodyellow" opacity=".5" />
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="12h" by="360" />
<circle r="7" />
</g>
<g id="minute">
<line stroke-width="4" y2="93" stroke-linecap="round" stroke="lightgreen" opacity=".9" />
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="60min" by="360" />
<circle r="6" fill="red" />
</g>
<g id="second">
<line stroke-width="2" y1="-20" y2="102" stroke-linecap="round" stroke="white" />
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="60s" by="360" />
<circle r="4" fill="blue" />
</g>
</g>
</g>
<g transform="translate(150, 280)">
<text font-size="20" fill="url(#g1)" stroke="none" text-anchor="middle" alignment-baseline="middle">
<tspan x="0" y="0">
수현이 혼자 두고 가는게 걸린다.
</tspan>
<tspan x="0" y="18">
집이 크고 낮 설어서....
</tspan>
</text>
</g>
</svg>
<script>
function setClock() {
var date = new Date();
var h = parseInt(date.getHours());
h = h > 12 ? h-12: h;
var m = parseInt(date.getMinutes());
var s = parseInt(date.getSeconds());
var second = 6 * s;
var minute = (m + s / 60) * 6;
var hour = (h + m / 60 + s / 3600) * 30;
console.log(hour);
console.log(minute);
console.log(second);
var hourHand = document.getElementById("hour");
var minuteHand = document.getElementById("minute");
var secondHand = document.getElementById("second");
hourHand.setAttribute("transform","rotate("+ hour.toString() +")");
minuteHand.setAttribute("transform","rotate("+ minute.toString() +")");
secondHand.setAttribute("transform","rotate("+ second.toString() +")");
}
setClock();
</script>
<svg id="mainSvg" viewBox="0 0 3000 3000">
<g id="cardGroup" transform="translate(-260, -370)">
<circle r="100" cx="260" cy="370" fill="red" />
</g>
</svg>
<script>
var srcPath = 'images/SVG_Vector_Playing_Cards_Version_1.3/52-Individual-Color-Vector-Playing_Cards-1.3_(SVG-Format_No_Crop_Marks)';
var cardGroups = [{name: "Spades", code: "S"}, {name: "Diamonds", code: "D"}, {name: "Hearts", code: "H"}, {name: "Clubs", code: "C"}];
var cards = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
$.ajaxSetup({async: true});
cardGroups.forEach(function(v, i) {
cards.forEach(function(w, j) {
var srcFile = srcPath + '/' + v.name + '/' + w + v.code + '.svg';
var $tmpDiv = $("<div></div>").load(srcFile, loadCallback);
function loadCallback() {
var $g = $tmpDiv.find("#layer1");
var $tmpG = $g;
var tmpX = 223.22835 * j;
var tmpY = 311.81104 * i;
$tmpG.attr("transform","translate(" + tmpX + "," + tmpY + ")");
$tmpG.append('<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="60s" by="360" />');
$("#cardGroup").append($tmpG);
}
});
});
</script>
</body>
</html>