svg--extensible amount of graphics, based on XML
PC-side: ie9+ WAP End: Good performance, suitable for use
Basic graphics:
Line (segment) <line x1= "y1=" "x2=" 375 "y2=" stroke= "#f00" ></line>
Polyline (polyline) <polyline points= "75,350 100,100 0" stroke= "#1A9EF2" fill= "None" ></polyline>
Circle (Circle) <circle cx= "135" cy= "r=", "style=" Stroke:none;fill: #ddd; " ></circle>
Rect (Rectangle) <rect x= "Ten" y= "ten" rx= "ten" ry= "ten" width= "height=" "style=" Stroke: #ccc; fill: #add; " ></rect>
Polygon (Polygon) <polygon points= "400,450 480,600,100,550" ></polygon>
Ellipse (ellipse) <ellipse cx= "" "cy=" "rx=" ry= "></ellipse>
Group Label:
<g fill= "DodgerBlue" >
<rect x= "510" y= "ten" width= "All" height= "ten" ry= "/>"
<rect x= "610" y= "Up" width= "" height= "" Ten "ry="/> "
<rect x= "710" y= "ten" width= "All" height= "" "Ry="/> "
</g>
Chain A:
<a xlink:href= "http://sina.com.cn" target= "_blank" >
<text x= "Ten" y= "style=" fill:red; >hello world!! </text>
</a>
Path Label: (m--move l--segment h--Horizontal segment v--Vertical segment a--arc c--three Bezier curve s--special version three Bezier curve q--two Bezier curve t--special version two Bezier curve z--closed)
<path d= "M 0 L 0 L L180-L120 (l) 0" transform= "translate (500,500)" ></path >
How SVG embeds pages: IMG, background, IFRAME, embed, object, embed directly with SVG tags
SVG generation tool Software: Adobe Illustrator, Svgdeveloper
Two CSS properties for path:
Stroke-dasharray/* Two parameters: Segment length segment Gap */
Stroke-dashoffset/* from where to start rendering the segment */
To get the path length JS Api:gettotallength method
The effect of an animation is achieved by changing the two properties of path:
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width,initial-scale=1.0,user-scalable=no"> <title>Path Stroke Animation 2</title> <style>Path:first-child{Stroke-dasharray:1089.82;/*two parameters: segment length segment Gap*/Stroke-dashoffset:1089.82; /*from where to start rendering segments*/ }Path:last-child{Stroke-dasharray:1288.02;Stroke-dashoffset:1288.02; }Path{Animation:Dash 5s linear infinite; }@keyframes Dash{to{Stroke-dashoffset:0; } } </style></Head><Body> <svgwidth= "640"Height= "480"version= "1.1"xmlns= "Http://www.w3.org/2000/svg"> <PathD= "M-60.99994 C-87.33333 71.5 84.66666 (c 80.49994 83.33333 82.16663 84.16666) C 87.83331 83.83333 89 80.16 666 96.99994 85.83333 105.6666 92.83333 109 101 C 112.3333 109.1667 116.9999 124.8333 113 109 C 139.1667 93.66 663 138.6667 144 C 76.33331 149.3333 61.99994 160.5 164 c 85.83331 167.5 72.16663 165.6667 165 C 164.3333 94.6 6663 156.3333 102 C 109.3333 163.6667 121.1666 175.6667 123 187 C 124.8333 198.3333 118.6666 216.1667 113 228 C 107.33 239.8333 92.33331 253.8333 258 c 85.66663 262.1667 94.99994 257.3333 (253 c) 248.6667 81.83331 239.3333, 232 C 72.16663 224.6667 55.66663 222.5 209 C 72.33331 195.5 103.8333 164 127 151 C 150.1666 138 193.1666 138.6667 203 131 C 212.8333 123.3333 191.9999 112.6667 186 (c) 97.33333 171.3333 75.83333 167 162.6666 94.16666 163.4999 133.8333 186.1667 c 156.5 144.8333 238.3333 146 242 c 147.1666 245.6667 159.5 199.3333 167 182 c 174.4999 164.6667 189.1666 146.8333 191 138 C 192.8333 129.1667 182.6666 130.5 178 129 c 173.3333 127.5 158.1666 118.8333 163 129 c 167.8333 139.1667 187.6666 171.6667 207 226.3333 208.3333 267 230.8333 279 239 "Fill= "#FFFFFF"Stroke= "#000000" /> <PathD= "M 430 c 432.4999 67.33333 76.83333 445 + c 449.9999 91.16666 464.9999 101.6667 460 107 C 455 112.3333 430.4999 1 13.6667 415-C 399.5 118.3333 373.3333 120.1667 367 121 C 360.6666 121.8333 361.6666 123 377 121 C 392.3333 119 432.333 3 113.8333 459 109 C 485.6666 104.1667 529.6666 92.49998 537 C 544.3333 91.5 514.4999 99.16666 503 106 C 491.5 112.8333 473.8333 124.3333 468 133 c 462.1666 141.6667 466.8333 156.3333 468 158 c 469.1666 159.6667 474.5 146.5 475 143 C 475.499 9 139.5 477.8333 135.8333 471 137 c 464.1666 138.1667 446.8333 142.5 434 C 421.1666 157.5 400.4999 173.1667 394 182 c 387.5 190.8333 394.6666 196.6667 395 203 C 395.3333 209.3333 396.6666 212 396 c 395.3333 228 392.6666 246.5 391 251 C 389.3333 255.5 379.5 257.5 386 247 c 392.4999 236.5 402.3333 202.1667 430 188 C 457.6666 173.8333 541 164.1667 552 162 C 5 62.9999 159.8333 511.1666 171.3333 496 175 C 480.8333 178.6667 466.8333 177.3333 461 184 c 455.1666 190.6667 462.3333 205. 3333 461 215 C 459.6666224.6667 454.6666 238.8333 453 242 c 451.3333 245.1667 448.6666 240.5 451 234 c 453.3333 227.5 458.5 212.3333 467 203 C 47 5.4999 193.6667 493.6666 177 502 178 C 510.3333 179 512.6666 197.8333 517 209 C 521.3333 220.1667 520 242.5 528 245 C 535. 9999 247.5 552.1666 232 565 224 C 577.8333 216 600.1666 206 605 197 C 609.8333 188 595.8333 174.5 594 170 "Fill= "#FFFFFF"Stroke= "#000000" /> </svg> <Script> varPaths=Document.queryselectorall ('Path'), Path0=paths[0],path1=paths[1]; varPath0len=path0.gettotallength (), Path1len=path1.gettotallength (); Console.log (Path0len+';'+Path1len)</Script></Body></HTML>
SVG Learning notes (i)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
