SVG: size

 

https://visionary.com/blog/making-an-animated-svg-checkbox/
https://www.svgviewer.dev/ 编辑SVG大小

 

?
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">    
<title>How to Scale SVG to Fit the Available Width (and adjust the height to match)</title>
<meta name="Description" content="geovindu"/>
<meta name="Keywords" content="geovindu"/>
<meta name="author" content="geovindu"/>     
<style type="text/css">
.scaling-svg-container {
 position: relative;
 height: 0;
 width: 50%;
 padding: 0;
 padding-bottom: 100%;
 /* override this inline for aspect ratio other than square https://css-tricks.com/scale-svg/*/
}
.scaling-svg {
 position: absolute;
 height: 100%;
 width: 100%;
 left: 0;
 top: 0;
}  
</style>
</head>
 
<body>
<div class="scaling-svg-container"
   style="padding-bottom: 92% /* 100% * 55/60 */">
  <svg class="scaling-svg" viewBox="0 0 60 55">
  <polyline points="30 20, 100 20," stroke-width="3" fill="none" stroke="#cccccc"></polyline>      
<g id="check_x5F_alt">
<path style="fill:#0000FF;" d="M 16,0
                            C 7.164,0,0,7.164,0,16
                            s 7.164,16,16,16
                            s 16-7.164,16-16
                            S 24.836,0,16,0
                            z"/>
    </g> 
  </svg>
</div>   
<h1>Scaling an SVG with No Aspect Ratio</h1>
<svg class="defs-only" xmlns="http://www.w3.org/2000/svg">
  <linearGradient id="sky" x2="50%" y2="50%" spreadMethod="repeat">
    <stop stop-color="lightblue" offset="10%" />
    <stop stop-color="white" offset="40%" />
    <stop stop-color="white" offset="60%" />
    <stop stop-color="lightblue" offset="100%" />
  </linearGradient>
  <radialGradient id="rainbow-grad">
    <stop stop-opacity="0" offset="0%" />
    <stop stop-color="#F00" stop-opacity="0" offset="39%" />
    <stop stop-color="#F00" stop-opacity="1" offset="42%" />
    <stop stop-color="#FF0" offset="65%" />
    <stop stop-color="#0F0" offset="75%" />
    <stop stop-color="#0FF" offset="85%" />
    <stop stop-color="#00F" offset="100%" />
  </radialGradient>
  <symbol id="rainbow">
    <rect height="100%" width="100%" fill="url(#sky)"/>
    <ellipse cx="50%" cy="120%" rx="50%" ry="110%" fill="url(#rainbow-grad)" />
  </symbol>
</svg>
<figure>
  <figcaption>50x25</figcaption>
  <div>
    <svg width="50" height="25">
      <use xlink:href="#rainbow"/>
    </svg>
  </div>
</figure>
<figure>
  <figcaption>100x50</figcaption>
  <div>
    <svg width="100" height="50">
      <use xlink:href="#rainbow"/>
    </svg>
  </div>
</figure>
<figure>
  <figcaption>200x100</figcaption>
  <div>
    <svg width="200" height="100">
      <use xlink:href="#rainbow"/>
    </svg>
  </div>
</figure>
<figure>
  <figcaption>200x50</figcaption>
  <div>
    <svg width="200" height="50">
      <use xlink:href="#rainbow"/>
    </svg>
  </div>
</figure>
<figure>
  <figcaption>50x50</figcaption>
  <div>
    <svg width="50" height="50">
      <use xlink:href="#rainbow"/>
    </svg>
  </div>
</figure>
<figure>
  <figcaption>Default Size</figcaption>
  <div>
    <svg>
      <use xlink:href="#rainbow"/>
    </svg>
  </div>
</figure>
     
     
 <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#clip0)">
        <path d="M21.3933 40H18.6067C8.33091 40 0 31.1351 0 20.2008V19.7992C0 8.86486 8.33091 0 18.6067 0H21.3933C31.6691 0 40 8.86486 40 19.7992V20.2008C40 31.1351 31.6691 40 21.3933 40Z" fill="#F2D03B" />
        <path d="M2.55461 15.4131C2.49655 15.4131 2.4385 15.4131 2.38044 15.3822C2.06114 15.2896 1.85795 14.9189 1.94503 14.5483C3.51252 8.83399 7.60541 4.23167 12.8884 2.25484C13.2077 2.13128 13.5561 2.31661 13.6722 2.65638C13.7883 2.99615 13.6141 3.3668 13.2948 3.49036C8.38915 5.34364 4.58654 9.60619 3.13516 14.9189C3.07711 15.2278 2.81586 15.4131 2.55461 15.4131Z" fill="white" />
        <path d="M29.5794 2.00769C34.0787 5.62159 36.9814 11.3359 36.9814 17.7915V18.193C36.9814 29.1274 28.6505 37.9922 18.3748 37.9922H15.5881C12.6563 37.9922 9.86969 37.2818 7.40234 35.9845C10.5083 38.4865 14.398 39.9691 18.607 39.9691H21.3936C31.6694 39.9691 40.0003 31.1042 40.0003 20.1699V19.7683C40.0003 11.9845 35.7623 5.25093 29.5794 2.00769Z" fill="#E8B938" />
        <path d="M14.8911 18.1003C14.3686 18.1003 13.9622 17.6679 13.9622 17.1119V16.5251C13.9622 15.5366 13.2075 14.7027 12.2495 14.7027C11.2626 14.7027 10.4789 15.5058 10.4789 16.5251V17.1119C10.4789 17.6679 10.0725 18.1003 9.54998 18.1003C9.02748 18.1003 8.62109 17.6679 8.62109 17.1119V16.5251C8.62109 14.4247 10.2176 12.7258 12.1915 12.7258C14.2234 12.7258 15.8199 14.4247 15.8199 16.5251V17.1119C15.8199 17.637 15.4135 18.1003 14.8911 18.1003Z" fill="#3D3813" />
        <path d="M30.4789 18.1003C29.9564 18.1003 29.5501 17.6679 29.5501 17.1119V16.5251C29.5501 15.5366 28.7953 14.7027 27.8374 14.7027C26.8505 14.7027 26.0667 15.5058 26.0667 16.5251V17.1119C26.0667 17.6679 25.6604 18.1003 25.1379 18.1003C24.6154 18.1003 24.209 17.6679 24.209 17.1119V16.5251C24.209 14.4247 25.8055 12.7258 27.7794 12.7258C29.8113 12.7258 31.4078 14.4247 31.4078 16.5251V17.1119C31.4078 17.637 31.0014 18.1003 30.4789 18.1003Z" fill="#3D3813" />
        <path d="M20.0288 32.2162C11.6979 32.2162 9.05635 26.4402 8.94024 26.1931C8.70802 25.6989 8.91121 25.112 9.37565 24.8649C9.84009 24.6178 10.3916 24.834 10.6238 25.3282C10.7109 25.5444 12.946 30.2085 20.0288 30.2085C27.1986 30.2085 29.4047 25.3591 29.4337 25.3282C29.6659 24.834 30.2175 24.6178 30.6819 24.8649C31.1463 25.112 31.3495 25.6989 31.1173 26.1931C31.0012 26.4402 28.3597 32.2162 20.0288 32.2162Z" fill="#3D3813" />
      </g>
      <defs>
        <clipPath id="clip0">
          <rect width="40" height="40" fill="white" />
        </clipPath>
      </defs>
    </svg>   
</body>
</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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">    
<title>How to Scale SVG to Fit the Available Width (and adjust the height to match)</title>
<meta name="Description" content="geovindu"/>
<meta name="Keywords" content="geovindu"/>
<meta name="author" content="geovindu"/>     
<style type="text/css">
.scaling-svg-container {
 position: relative;
 height: 5rem;
 width: 50rem;
 margin-left: 0px;
 padding: 0;
 padding-bottom: 0%;
 /* override this inline for aspect ratio other than square https://css-tricks.com/scale-svg/
    style="padding-bottom: 92% /* 100% * 55/60 */"
     
    */
}
.scaling-svg {
 position: absolute;
 height: 100%;
 width: 100%;
 left: 0;
 top: 0;
}  
</style>
</head>
 
<body>
<div class="scaling-svg-container">
  <svg class="scaling-svg" viewBox="0 0 60 55">
  <polyline points="30 20, 100 20," stroke-width="3" fill="none" stroke="#cccccc"></polyline>      
<g id="check_x5F_alt">   
    <polyline points="50 20, 100 20,120,20,170 20,220 20,270 20" stroke-width="3" fill="none" stroke="#cccccc"></polyline>
    <circle cx="20" cy="20" r="15" fill="blue"></circle>
     <circle cx="70" cy="20" r="15" fill="gray"></circle>
    <circle cx="120" cy="20" r="15" fill="gray"></circle>
    <circle cx="170" cy="20" r="15" fill="gray"></circle>
    <circle cx="220" cy="20" r="15" fill="gray"></circle>
    <circle cx="270" cy="20" r="15" fill="gray"></circle>
    </g>
       
  </svg>
    </div>
<div class="scaling-svg-container">
<svg class="scaling-svg" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="220px"
     height="55px"
     viewBox="0 0 220px 55px">
<!-- Draw polyline  edit geovindu 2022-11-23-->
    <polyline points="50 20, 100 20,150 20,200 20,250 20,300 20" stroke-width="3" fill="none" stroke="#cccccc"></polyline>
     <circle cx="50" cy="20" r="15" fill="gray"></circle>
    <circle cx="100" cy="20" r="15" fill="gray"></circle>
    <circle cx="150" cy="20" r="15" fill="gray"></circle>
    <circle cx="200" cy="20" r="15" fill="gray"></circle>
    <circle cx="250" cy="20" r="15" fill="gray"></circle>
    <circle cx="300" cy="20" r="15" fill="gray"></circle>
</svg>   
</div>   
     
     
<h1>Scaling an SVG with No Aspect Ratio</h1>
<svg class="defs-only" xmlns="http://www.w3.org/2000/svg">
  <linearGradient id="sky" x2="50%" y2="50%" spreadMethod="repeat">
    <stop stop-color="lightblue" offset="10%" />
    <stop stop-color="white" offset="40%" />
    <stop stop-color="white" offset="60%" />
    <stop stop-color="lightblue" offset="100%" />
  </linearGradient>
  <radialGradient id="rainbow-grad">
    <stop stop-opacity="0" offset="0%" />
    <stop stop-color="#F00" stop-opacity="0" offset="39%" />
    <stop stop-color="#F00" stop-opacity="1" offset="42%" />
    <stop stop-color="#FF0" offset="65%" />
    <stop stop-color="#0F0" offset="75%" />
    <stop stop-color="#0FF" offset="85%" />
    <stop stop-color="#00F" offset="100%" />
  </radialGradient>
  <symbol id="rainbow">
    <rect height="100%" width="100%" fill="url(#sky)"/>
    <ellipse cx="50%" cy="120%" rx="50%" ry="110%" fill="url(#rainbow-grad)" />
  </symbol>
</svg>
<figure>
  
  <div>
    <svg width="50" height="25">
      <use xlink:href="#rainbow"/>
    </svg>
  </div>
    <figcaption>50x25</figcaption>
</figure>
<figure>
  <figcaption>100x50</figcaption>
  <div>
    <svg width="100" height="50">
      <use xlink:href="#rainbow"/>
    </svg>
  </div>
</figure>
<figure>
  <figcaption>200x100</figcaption>
  <div>
    <svg width="200" height="100">
      <use xlink:href="#rainbow"/>
    </svg>
  </div>
</figure>
<figure>
  <figcaption>200x50</figcaption>
  <div>
    <svg width="200" height="50">
      <use xlink:href="#rainbow"/>
    </svg>
  </div>
</figure>
<figure>
  <figcaption>50x50</figcaption>
  <div>
    <svg width="50" height="50">
      <use xlink:href="#rainbow"/>
    </svg>
  </div>
</figure>
<figure>
  <figcaption>Default Size</figcaption>
  <div>
    <svg>
      <use xlink:href="#rainbow"/>
    </svg>
  </div>
</figure>
     
     
 <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#clip0)">
        <path d="M21.3933 40H18.6067C8.33091 40 0 31.1351 0 20.2008V19.7992C0 8.86486 8.33091 0 18.6067 0H21.3933C31.6691 0 40 8.86486 40 19.7992V20.2008C40 31.1351 31.6691 40 21.3933 40Z" fill="#F2D03B" />
        <path d="M2.55461 15.4131C2.49655 15.4131 2.4385 15.4131 2.38044 15.3822C2.06114 15.2896 1.85795 14.9189 1.94503 14.5483C3.51252 8.83399 7.60541 4.23167 12.8884 2.25484C13.2077 2.13128 13.5561 2.31661 13.6722 2.65638C13.7883 2.99615 13.6141 3.3668 13.2948 3.49036C8.38915 5.34364 4.58654 9.60619 3.13516 14.9189C3.07711 15.2278 2.81586 15.4131 2.55461 15.4131Z" fill="white" />
        <path d="M29.5794 2.00769C34.0787 5.62159 36.9814 11.3359 36.9814 17.7915V18.193C36.9814 29.1274 28.6505 37.9922 18.3748 37.9922H15.5881C12.6563 37.9922 9.86969 37.2818 7.40234 35.9845C10.5083 38.4865 14.398 39.9691 18.607 39.9691H21.3936C31.6694 39.9691 40.0003 31.1042 40.0003 20.1699V19.7683C40.0003 11.9845 35.7623 5.25093 29.5794 2.00769Z" fill="#E8B938" />
        <path d="M14.8911 18.1003C14.3686 18.1003 13.9622 17.6679 13.9622 17.1119V16.5251C13.9622 15.5366 13.2075 14.7027 12.2495 14.7027C11.2626 14.7027 10.4789 15.5058 10.4789 16.5251V17.1119C10.4789 17.6679 10.0725 18.1003 9.54998 18.1003C9.02748 18.1003 8.62109 17.6679 8.62109 17.1119V16.5251C8.62109 14.4247 10.2176 12.7258 12.1915 12.7258C14.2234 12.7258 15.8199 14.4247 15.8199 16.5251V17.1119C15.8199 17.637 15.4135 18.1003 14.8911 18.1003Z" fill="#3D3813" />
        <path d="M30.4789 18.1003C29.9564 18.1003 29.5501 17.6679 29.5501 17.1119V16.5251C29.5501 15.5366 28.7953 14.7027 27.8374 14.7027C26.8505 14.7027 26.0667 15.5058 26.0667 16.5251V17.1119C26.0667 17.6679 25.6604 18.1003 25.1379 18.1003C24.6154 18.1003 24.209 17.6679 24.209 17.1119V16.5251C24.209 14.4247 25.8055 12.7258 27.7794 12.7258C29.8113 12.7258 31.4078 14.4247 31.4078 16.5251V17.1119C31.4078 17.637 31.0014 18.1003 30.4789 18.1003Z" fill="#3D3813" />
        <path d="M20.0288 32.2162C11.6979 32.2162 9.05635 26.4402 8.94024 26.1931C8.70802 25.6989 8.91121 25.112 9.37565 24.8649C9.84009 24.6178 10.3916 24.834 10.6238 25.3282C10.7109 25.5444 12.946 30.2085 20.0288 30.2085C27.1986 30.2085 29.4047 25.3591 29.4337 25.3282C29.6659 24.834 30.2175 24.6178 30.6819 24.8649C31.1463 25.112 31.3495 25.6989 31.1173 26.1931C31.0012 26.4402 28.3597 32.2162 20.0288 32.2162Z" fill="#3D3813" />
      </g>
      <defs>
        <clipPath id="clip0">
          <rect width="40" height="40" fill="white" />
        </clipPath>
      </defs>
    </svg>   
</body>
</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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">    
<title>svg draw cat</title>
<meta name="Description" content="geovindu"/>
<meta name="Keywords" content="geovindu"/>
<meta name="author" content="geovindu"/> 
  <script src="ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
  <link rel='stylesheet' href='bootstrap/3.4.1/css/bootstrap.min.css'>
<style type="text/css">
/*https://www.svgrepo.com/vectors/check-mark/
    https://docs.aspose.com/svg/net/drawing-basics/svg-path-data/
    */
body {
    font-family: Avenir, sans-serif;
    box-sizing: border-box;
 
}
ol.goals {
    list-style-type: none;
    margin-bottom: 2rem;
}
ol.goals li {
    position: relative;
    margin-top: 1.6rem;
}
ol.goals:after {
    content: " ";
    position: absolute;
    height: 1.6rem;
    width: 3px;
    background: #888;
    left: 84px;
    top: 102px;
    z-index: 1;
}
ol.goals:last-child:after {
    content: none;
}
ol.goals a {
    text-decoration: none;
    z-index: 3;
    color: #000;
    position: relative;
    width: 19rem;
    display: inline-block;
}
ol.goals a img {
    vertical-align: middle;
    width: 75px;
    height: 75px;
    margin-right: 1rem;
    border: 1px solid transparent;
    border-radius: 50%;
    background: #333;
}
ol.goals a svg {
    position: absolute;
    right: 0;
    top: 1rem;
    width: 3rem;
    height: 3rem;
}
ol.goals a svg polygon {
    fill: #fff;
}
ol.goals a:visited {
    color: #ccc;
}
ol.goals a:visited svg polygon {
    fill: green;
}
@media screen and (max-width: 500px) {
    ol.goals {
        text-align: center;
        margin-left: 0;
    }
    ol.goals li {
        margin-left: 0;
        z-index: 2;
    }
    ol.goals:after {
        left: 50%;
        height: 3.5rem;
        background: #eee;
    }
    ol.goals img {
        display: block;
        margin-left: 6rem;
    }
}  
     
.done {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 20px auto;
    box-shadow: inset 0px 0px 0px #7ac142;
    animation: fill-green 0.5s ease-in-out 0.5s forwards, scale 0.3s ease-in-out 0.7s both;
}
.done .circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #7ac142;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.done .check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.7s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
.error {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 20px auto;
    box-shadow: inset 0px 0px 0px #e74c3c;
    animation: fill-red 0.5s ease-in-out 0.5s forwards, scale 0.3s ease-in-out 0.7s both;
}
.error .circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #e74c3c;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.error .line {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.7s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
.error .line:nth-child(1) {
    animation-delay: 1s;
}
.error .line:nth-child(2) {
    /* Animate */
      
    animation-delay: 0.7s;
}
@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes scale {
    0%, 100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.2, 1.2, 1);
    }
    80% {
        transform: scale3d(0.8, 0.8, 1);
    }
}
@keyframes fill-green {
    100% {
        box-shadow: inset 0px 0px 0px 25px #7ac142;
    }
}
@keyframes fill-red {
    100% {
        box-shadow: inset 0px 0px 0px 25px #e74c3c;
    }
}  
     
</style>
</head>
 
<body>
<div class="container">
<div class="row">    
<svg height="50" width="50" viewBox="0 0 50 50">
<polygon points="4,30 14,40 45,12 41,9 14,34 8,27" style="stroke: red; fill: none;"  />
</svg>
</div>
     
<div class="row">
<svg height="30" width="220" viewBox="0 0 220 30">
<circle class="circle" cx="16" cy="16" r="15" fill="blue" /> 
<polygon points="2,15 7,20 22,6 20,4 7,17 4,13" style="stroke: red; fill: red;"  />
<polygon points="12,25 17,30 32,16 30,14 17,27 14,23" style="stroke: red; fill: red;"  />
     
</svg>   
</div>
     
<div class="row">
<svg height="30" width="220" viewBox="0 0 220 30">
<polygon points="4,30 14,40 45,12 41,9 14,34 8,27" style="stroke: red; fill: none;"  />
<g id="check_x5F_alt">
<path style="fill:#0000FF;" d="M16,0C7.164,0,0,7.164,0,16s7.164,16,16,16s16-7.164,16-16S24.836,0,16,0z M13.52,23.383
            L6.158,16.02l2.828-2.828l4.533,4.535l9.617-9.617l2.828,2.828L13.52,23.383z"/>
    </g> 
</svg>       
</div>
     
<div class="row">        
<svg class="done" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 52 52">
    <circle class="circle" cx="26" cy="26" r="25" fill="none" />
    <path class="check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
</svg>
    </div>
     
    <div class="row">
         
    <svg class="done" height="30" width="220" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">  
    <circle class="circle" cx="26" cy="26" r="25" fill="none" />
    <path class="check" fill="none" d="M 14.1 27.2 l 7.1 7.2 16.7 -16.8" />      
        </svg>
             
     
    <div class="row">    
  <svg class="error" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 52 52">
    <circle class="circle" cx="26" cy="26" r="25" fill="none" />
    <path class="line" fill="none" d="M 17.36,34.736 l 17.368,-17.472" />
    <path class="line" fill="none" d="M 34.78,34.684 L 17.309,17.316" />
</svg>
    </div>
    <div class="row">珍珠  
        <svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="420px"
     height="80px"
     viewBox="0 0 420px 80px">
<!-- Draw polyline  edit geovindu 2022-11-23-->
    <image href="00.svg" x="50" y="20" height="50" width="220" />
    <image href="00.svg" x="110" y="20" height="50" width="220" />
    <image href="00.svg" x="170" y="20" height="50" width="220" />
    <image href="00.svg" x="230" y="20" height="50" width="220" />
    <image href="00.svg" x="290" y="20" height="50" width="220" />
    <image href="22.svg" x="350" y="20" height="50" width="220" />
    <text x="240" y="70">未開始</text>
</svg>
        開始養珍珠
    </div>
<div class="row">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="420px"
     height="80px"
     viewBox="0 0 420px 80px">
<!-- Draw polyline  edit geovindu 2022-11-23-->
    <image href="11.svg" x="80" y="20" height="50" width="220" />
    <image href="00.svg" x="110" y="20" height="50" width="220" />
    <image href="00.svg" x="170" y="20" height="50" width="220" />
    <image href="00.svg" x="230" y="20" height="50" width="220" />
    <image href="00.svg" x="290" y="20" height="50" width="220" />
    <image href="22.svg" x="350" y="20" height="50" width="220" />
    <text x="240" y="70">和蚌相遇了</text>
</svg>   
    </div>
<div class="row">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="420px"
     height="80px"
     viewBox="0 0 420px 80px">
<!-- Draw polyline  edit geovindu 2022-11-23-->
    <image href="55.svg" x="80" y="20" height="50" width="220" />
    <image href="11.svg" x="150" y="20" height="50" width="220" />
    <image href="00.svg" x="170" y="20" height="50" width="220" />
    <image href="00.svg" x="230" y="20" height="50" width="220" />
    <image href="00.svg" x="290" y="20" height="50" width="220" />
    <image href="22.svg" x="350" y="20" height="50" width="220" />
    <text x="240" y="70">和蚌相遇了</text>
</svg>
     
    </div>
<div class="row">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="420px"
     height="80px"
     viewBox="0 0 420px 80px">
<!-- Draw polyline  edit geovindu 2022-11-23-->
    <image href="55.svg" x="80" y="20" height="50" width="220" />
    <image href="55.svg" x="140" y="20" height="50" width="220" />
    <image href="11.svg" x="200" y="20" height="50" width="220" />
    <image href="00.svg" x="230" y="20" height="50" width="220" />
    <image href="00.svg" x="290" y="20" height="50" width="220" />
    <image href="22.svg" x="350" y="20" height="50" width="220" />
    <text x="240" y="70">和蚌相遇了</text>  
    </div>
<div class="row">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="420px"
     height="80px"
     viewBox="0 0 420px 80px">
<!-- Draw polyline  edit geovindu 2022-11-23-->
    <image href="55.svg" x="80" y="20" height="50" width="220" />
    <image href="55.svg" x="140" y="20" height="50" width="220" />
    <image href="55.svg" x="200" y="20" height="50" width="220" />
    <image href="11.svg" x="260" y="20" height="50" width="220" />
    <image href="00.svg" x="290" y="20" height="50" width="220" />
    <image href="22.svg" x="350" y="20" height="50" width="220" />
    <text x="240" y="70">和蚌相遇了</text>  
    </div>
<div class="row">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="420px"
     height="80px"
     viewBox="0 0 420px 80px">
<!-- Draw polyline  edit geovindu 2022-11-23-->
    <image href="55.svg" x="80" y="20" height="50" width="220" />
    <image href="55.svg" x="140" y="20" height="50" width="220" />
    <image href="55.svg" x="200" y="20" height="50" width="220" />
    <image href="55.svg" x="250" y="20" height="50" width="220" />
    <image href="11.svg" x="310" y="20" height="50" width="220" />
    <image href="22.svg" x="350" y="20" height="50" width="220" />
    <text x="240" y="70">和蚌相遇了</text>
</svg>   
    </div>
<div class="row">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="420px"
     height="80px"
     viewBox="0 0 420px 80px">
<!-- Draw polyline  edit geovindu 2022-11-23-->
    <image href="55.svg" x="80" y="20" height="50" width="220" />
    <image href="55.svg" x="140" y="20" height="50" width="220" />
    <image href="55.svg" x="200" y="20" height="50" width="220" />
    <image href="55.svg" x="250" y="20" height="50" width="220" />
    <image href="55.svg" x="310" y="20" height="50" width="220" />
    <image href="33.svg" x="380" y="20" height="50" width="220" />
    <text x="240" y="70">和蚌相遇了</text>
</svg>   
    </div>
<div class="row">
    </div>
<div class="row">
    </div>   
    </div>
</body>
</html>

　　

posted @   ®Geovin Du Dream Park™  阅读(30)  评论(0)  编辑  收藏  举报
相关博文：
·  SVG: draw text on a image
·  SVG: SVG Path
·  svg缩放viewBox
·  CSS – Icon
·  svg之viewbox缩放
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
历史上的今天：
2013-11-29 asp 日期操作
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 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 1 2 3 4 5
点击右上角即可分享
微信分享提示