SVG标签属性viewbox的妙用

 

viewbox：可以根据父级大小缩放svg绘制出来的大小

<div class="h5_xp">
            <svg viewbox="0 0 640 640" width="100%" height="100%">
                <path d="M310 124 S315 140 300 134 L300 134 S294 120 310 124 L316 117 L381 116 L391 124 S384 136 401 134 L401 134 S411 123 391 124">path>
                <path d="M423 111 L449 140 L480 140 L496 119">path>
                <path d="M123 125 L181 125 L192 137 L281 137 L300 151 L410 151 L423 165 L471 165 L495 185">path>
                <path d="M123 133 L178 133 L189 144 L278 144 L299 162 L410 162 L421 172 L467 173 L494 196">path>
                <path d="M122 141 L167 141 L186 158 L274 158 L292 175 L328 175 L347 193 L375 193 S384 182 387 194 L387 194 S378 205 378 193 L375 193 S384 182 387 194 L406 194 L423 210 L499 210">path>
                <path d="M118 165 L163 165 L213 213 L275 214 L292 200 L320 200 L355 232 L376 232 L390 246 L492 246 L503 236 L394 236 L379 222 L358 222 L324 191 L288 190 L274 204 L225 205 L209 188 S215 169 197 176 L197 176 S188 190 209 188">path>
                <path d="M115 191 L164 192 L213 238 L373 238 L388 252 L502 252">path>
                <path d="M119 242 L138 258 S152 253 148 266 L148 266 S135 272 138 258"/>    
                <path d="M115 270 L135 290 L155 290 L172 275 L222 273 L236 259 L162 260 L132 231 L120 232 L108 220 L118 208 L163 208 L203 247 L369 246 L387 263 L504 262">path>
                <path d="M111 310 L129 327 L291 327 L310 312 L386 312 L414 336 L507 336">path>
                <path d="M169 311 S171 326 159 318 L159 318 S154 307 169 311 L177 301 L227 301 L255 275 L287 275 L313 298 L505 298">path>
                <path d="M199 289 L226 288 L251 266 L288 265 L311 286 L499 286">path>
                <path d="M242 304 S226 314 242 321 L242 321 S256 313 242 304 L257 285 L290 286 L313 306 L502 306">path>
                <path d="M116 347 L138 366 L159 366 L168 361 S183 365 179 350 L179 350 S163 346 168 361">path>
                <path d="M114 369 L133 388 L160 387 L193 358 S186 343 203 344 L203 344 S208 359 193 358">path>
                <path d="M115 382 L135 402 L164 402 L204 362 L217 362 L243 337 L293 336 L311 320 L377 319 L404 341 L467 343 L489 366 L351 366 L313 402 L176 404 L143 434 L133 435">path>
                <path d="M116 491 L123 491 L199 414 L314 414 L350 376 L514 376">path>
                <path d="M145 489 L147 474 L200 423 L314 422 L350 387 L443 386 L453 397 S448 412 464 410 L464 410 S470 394 453 397">path>
                <path d="M204 507 L204 462 L215 448 L267 447 L291 472 L438 471 L509 403 L492 405 L440 454 L405 454 S402 470 392 462 L392 462 S391 444 405 454">path>
                <path d="M213 510 L213 469 L221 458 L263 456 L287 481 L287 481 L442 481 L508 412 L508 428 L447 489 L264 489 L240 511">path>
                <path d="M257 511 L267 498 L447 499 L504 442 L504 456 L466 496 L486 496 S">path>
                <path d="M354 436 L349 444 L293 443 L311 460 L365 460 L389 437 L403 436 L411 444 L441 444 L501 386 L509 386">path>
            svg>
        div>

//样式

.h5_xp{width:640px;height:640px;background:url(xp.png) no-repeat; background-size:640px 640px;}
        path{-webkit-animation:p11 4s linear 1;stroke-width:2;stroke:#00f8ff;fill:none;}
        @-webkit-keyframes p11{
            0%{stroke-dasharray:1000px,1000px;stroke-dashoffset:1000px;}
            100%{stroke-dasharray:1000px,0;stroke-dashoffset:0;}
        }

 

 

 

 

 

但是用viewbox改变了父级div的大小   能缩哟

 

转载于:https://www.cnblogs.com/sugege/p/8195749.html