以下是 html5 svg绘制唐老鸭样式代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html5 svg绘制唐老鸭样式代码</title>
<style>
*{ margin:0; padding:0;}
.box{background:#fff; margin:100px auto; width:900px; height:600px;}
</style>
</head>
<body>
<div class="box">
<svg xmlns="http://www.w3.org/2000/svg" version="1" width="900" height="600" >
<path d="M130 375
C130 375 113 388 91 386
M111 384
C111 384 87 320 18 412
C18 412 0 440 51 475
C51 475 54 476 80 480
C80 480 111 504 118 466
C118 466 188 420 118 421
C118 421 94 425 110 410
M69 404
C69 404 81 423 153 393
L153 393 134 369
" style="fill:#f89b00; stroke:#b62202; stroke-width:3"></path>
<path d="M51 420
C51 420 78 417 96 436
M36 431
C36 431 64 426 93 440
" style="fill:#f89b00; stroke:#b62202; stroke-width:2" ></path>
<path d="M304 460
C304 460 285 429 247 405
L247 405 274 387
C274 387 304 402 322 421
C322 421 330 398 330 376
C330 376 330 364 345 363
C350 363 364 330 401 352
C401 352 419 351 424 362
C424 362 420 460 346 486
C346 486 303 510 305 460
M304 460
L304 460 322 421
" style="fill:#f89b00; stroke:#b62202; stroke-width:3"></path>
<path d="M351 159
C351 159 350 146 335 130
M346 143
C346 143 292 125 327 100
C320 100 345 53 365 92
C365 82 378 85 386 109
C386 99 410 122 383 138
" style="fill:#fff; stroke:#878787; stroke-width:2;"></path>
<path d="M328 112
C328 112 320 102 344 91
M326 102
C326 102 330 104 334 88
M363 87
C363 87 365 91 367 99
M384 104
C384 104 386 111 385 117
" style="fill:#fff; stroke:#878787; stroke-width:1;"></path>
<path d="M120 260
C120 260 107 273 120 287
M168 247
C171 247 182 266 175 281
M219 286
C219 286 175 271 143 295
M155 287
C155 287 141 283 126 286
M140 290
C140 290 112 280 85 296
C85 296 99 294 112 305
C112 305 98 301 88 306
C88 306 110 312 119 328
M128 309
C128 309 103 338 123 381
C123 381 124 372 125 363
C125 363 126 378 143 386
M140 365
C140 365 135 387 159 398
L159 398 152 403
C152 403 250 460 314 334
M121 281
C121 281 138 267 144 278
M135 286
C135 286 140 270 155 278
M148 268
C148 268 150 279 166 278
" style="fill:#fff; stroke:#878787; stroke-width:2;"></path>
<path d="M205 180
C205 180 212 190 131 198
C131 198 97 193 101 228
C101 228 114 287 160 262
C160 262 169 253 168 240
C168 240 178 236 185 237
C230 260 231 267 228 270
C228 270 175 328 249 341
C249 341 272 350 334 325
C334 325 343 292 338 255
C338 255 431 229 408 160
C408 160 388 109 343 160
C343 160 342 184 341 189
C341 189 343 195 306 202
C306 202 286 192 253 195
L253 195 208 171
" style="fill:#2b5e9f;stroke:#0e0541; stroke-width:2;"></path>
<path d="M208 171
C208 171 201 173 207 189
C207 189 214 198 205 208
L205 190 195 205
" style="fill:#2b5e9f;stroke:#0e0541; stroke-width:2;"></path>
<path d="M205 180
C205 180 150 204 161 220
C161 220 188 230 192 271
C192 285 229 263 247 244
C247 244 267 215 303 202
C303 202 303 199 299 199
C299 194 270 200 228 239
C228 239 216 255 201 248
C201 248 198 226 181 212
C181 212 198 196 205 187
" style="fill:#feee00;stroke:#0e0541; stroke-width:2;"></path>
<path d="M167 240
C167 240 162 240 155 246
" style="fill:#2b5e9f;stroke:#0e0541; stroke-width:1;"></path>
<path d="M229 270
C229 270 232 283 222 294
" style="fill:#2b5e9f;stroke:#0e0541; stroke-width:1;"></path>
<path d="M288 271
C288 271 312 261 337 255
C337 255 314 288 282 314
" style="fill:#2b5e9f;stroke:#0e0541; stroke-width:2;"></path>
<path d="M354 181
C354 181 350 188 341 188
C335 196 354 194 362 188
" style="fill:#2b5e9f;stroke:#0e0541; stroke-width:1;"></path>
<path d="M169 47
C170 45 162 13 140 6
C142 3 95 10 100 45
C100 45 101 60 114 80
C114 80 117 89 110 102
C108 104 105 128 115 145
C122 152 140 145 149 125Z
" style="fill:#0180a9;stroke:#133092;stroke-width:2;"></path>
<path d="M168 47
C167 47 149 20 138 75
C136 78 136 121 150 119
" style=" fill:#053973; stroke:#000; stroke-width:3;"></path>
<path d="M200 55
L200 50 L191 50
C172 56 216 25 168 52
C168 52 167 42 159 39
C159 39 171 55 147 70
C148 83 145 128 178 153
" style=" fill:#fff; stroke:#7f7f7f; stroke-width:2;"></path>
<path d="M190 70
L197 55 212 55 220 70
C220 70 206 50 215 44
C218 43 220 39 245 59
" style="fill:#fff; stroke:#727272; stroke-width:2;"></path>
<path d="M166 116
C166 116 145 95 146 72
C146 68 161 56 190 75
" style="fill:#fff; stroke:#727272; stroke-width:2;"></path>
<ellipse cx="-138" cy="-216" rx="13" ry="30" style="fill:#e6f5fa; stroke:#7e7e7b; stroke-width:2; transform:rotate(140deg);-webkit-transform:rotate(140deg);"></ellipse>
<ellipse cx="-115" cy="-235" rx="9" ry="20" style="fill:#000;transform:rotate(135deg);-webkit-transform:rotate(135deg)"></ellipse>
<ellipse cx="-59" cy="-220" rx="22" ry="50" style="fill:#e6f5fa; stroke:#7e7e7b; stroke-width:2;transform:rotate(135deg);-webkit-transform:rotate(135deg)"></ellipse>
<ellipse cx="-40" cy="-233" rx="15" ry="27" style="fill:#000; transform:rotate(132deg);-webkit-transform:rotate(132deg)"></ellipse>
<path d="M275 113
C275 113 296 40 328 49
C326 44 348 68 290 102
L290 102 288 110
C288 110 325 135 294 165
C294 165 261 225 208 172
C208 172 195 165 178 155
C178 155 160 138 180 135
C183 132 244 165 228 100
C228 100 229 89 248 99
C248 99 265 112 266 87
C266 85 278 72 285 90
C285 91 282 100 272 92
" style="fill:#fed100; stroke:#d16100; stroke-width:3;"></path>
<path d="M283 109
C283 115 305 137 291 146
C291 146 253 209 238 172
C238 172 224 157 190 151
C190 151 248 165 283 109
" style="fill:#d53400;stroke:#ce6a02; stroke-width:3;"></path>
<path d="M283 109
C283 109 300 72 320 68
" style="fill:#fed100;stroke:#ce6a02; stroke-width:2;"></path>
<path d="M245 144
C245 144 268 133 270 126
C270 126 278 135 270 150
C270 150 256 144 245 144
" style="fill:#f76eb8; stroke:#f76eb8;"></path>
</svg>
</div>
</body>
</html>
分享到QQ
分享到微博
微信扫一扫
