-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
87 lines (85 loc) · 2.79 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
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* Example-specific styles */
.scaling-svg-container {
position: relative;
height:0;
width: 100%;
padding: 0;
padding-bottom: 100%;
/* over-ride this inline for aspect ratio other than square */
}
.scaling-svg {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top:0;
}
.box{
width: 320px;
height: 320px;
}
</style>
</head>
<body>
<div>
<h1>Scaling Inline SVG using <code>padding</code> on a container <code><div></code></h1>
<svg class="defs-only" xmlns="http://www.w3.org/2000/svg">
<linearGradient id="coin" x2="50%" y2="40%" spreadMethod="reflect">
<stop stop-color="gold" offset="30%" />
<stop stop-color="goldenrod" offset="70%" />
<stop stop-color="white" offset="82%" />
<stop stop-color="gold" offset="92%" />
<stop stop-color="darkgoldenrod" offset="100%" />
</linearGradient>
<radialGradient id="pot" fx="30%" fy="35%">
<stop stop-color="white" offset="0%" />
<stop stop-color="gold" offset="15%" />
<stop stop-color="goldenrod" offset="80%" />
<stop stop-color="darkgoldenrod" offset="100%" />
</radialGradient>
<symbol id="potofgold" >
<g fill="url(#coin)" stroke="darkgoldenrod" stroke-width="0.5">
<circle r="5" transform="translate(30,7)" />
<circle r="5" transform="translate(35,13)" />
<circle r="5" transform="translate(22,10)" />
<circle r="5" transform="translate(27,9)" />
<circle r="5" transform="translate(18,17)" />
<circle r="5" transform="translate(42,18)" />
<circle r="5" transform="translate(32,19)" />
<circle r="5" transform="translate(30,14)" />
<circle r="5" transform="translate(25,15)" />
<circle r="5" transform="translate(37,19)" />
<circle r="5" transform="translate(31,16)" />
<circle r="5" transform="translate(20,18)" />
<circle r="5" transform="translate(26,21)" />
</g>
<path fill="url(#pot)" stroke="#751" stroke-width="0.5"
d="M30,50 C45,50 55,45 55,35
Q 55,27 50,25 C55,22 53,15 45,20
S 23,25 15,20 S5,22 10,25
Q 5,27 5,35 C5,45 15,50 30,50Z"
/>
</symbol>
</svg>
<figure>
<figcaption>Inline SVG, 100% width and height, aspect ratio preserved with padding on the container</figcaption>
<div class="box">
<div class="scaling-svg-container"
style="padding-bottom: 92% /* 100% * 55/60 */">
<svg class="scaling-svg" viewBox="0 0 60 55" >
<use xlink:href="#potofgold"/>
</svg>
</div>
</div>
</figure>
</div>
<script type="text/javascript">
</script>
</body>
</html>