svg的案例详解

svg的几个小案例

最近经常用到svg，闲的无聊的时候做了几个简单的小例子，希望能帮到大家，svg会用了之后做动画和图片都方便了好多，接下来就看看小例子吧！！

1、例子一

css代码

html, body {
  width: 100%;
  height: 100%;}body {
  background: #131518;}#patt1 path {
  stroke: #ff509e;}#patt2 path {
  stroke: #95d13c;}#patt3 path {
  stroke: #00b6cb;}#patt4 path {
  stroke: #9753e1;}#mask1 rect {
  -webkit-animation: pulse 1.90476s infinite;  animation: pulse 1.90476s infinite;
  -webkit-animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);  animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);}#mask2 rect {
  x: 10;
  -webkit-animation: pulse 1.90476s infinite 0.47619s;  animation: pulse 1.90476s infinite 0.47619s;
  -webkit-animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);  animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);}#squiggle1, #squiggle2, #squiggle3, #squiggle4 {
  background-blend-mode: multiply;}@-webkit-keyframes pulse {
  0% {x: 10;
  }
  50% {x: -20;
  }
  100% {x: -50;
  }}

@keyframes pulse {
  0% {x: 10;
  }
  50% {x: -20;
  }
  100% {x: -50;
  }}

html代码

<svg viewBox=0 0 200 200>
  <defs><pattern id=patt1 x=0 y=0 width=60 height=60 patternUnits=userSpaceOnUse>  <path d=M0,7.5C12.9,7.5 17.1,22.5 30,22.5C42.9,22.5 47.1,7.5 60,7.5 stroke=#f00 stroke-width=1 fill=transparent></path></pattern><pattern id=patt2 x=30 y=15 width=60 height=60 patternUnits=userSpaceOnUse>  <path d=M0,7.5C12.9,7.5 17.1,22.5 30,22.5C42.9,22.5 47.1,7.5 60,7.5 stroke=#00f stroke-width=1 fill=transparent></path></pattern><pattern id=patt3 x=0 y=30 width=60 height=60 patternUnits=userSpaceOnUse>  <path d=M0,7.5C12.9,7.5 17.1,22.5 30,22.5C42.9,22.5 47.1,7.5 60,7.5 stroke=#0f0 stroke-width=1 fill=transparent></path></pattern><pattern id=patt4 x=30 y=45 width=60 height=60 patternUnits=userSpaceOnUse>  <path d=M0,7.5C12.9,7.5 17.1,22.5 30,22.5C42.9,22.5 47.1,7.5 60,7.5 stroke=#fc0 stroke-width=1 fill=transparent></path></pattern><linearGradient id=grad1 x1=0 x2=0.15 spreadMethod=repeat>  <stop offset=0% stop-color=white stop-opacity=1></stop>  <stop offset=75% stop-color=white stop-opacity=0></stop></linearGradient><linearGradient id=grad2 x1=0.5 x2=0.65 spreadMethod=repeat>  <stop offset=0% stop-color=white stop-opacity=1></stop>  <stop offset=75% stop-color=white stop-opacity=0></stop></linearGradient>
  </defs>
  <mask id=mask1><rect fill=url(#grad1) width=400 height=200></rect>
  </mask>
  <mask id=mask2><rect fill=url(#grad2) width=400 height=200></rect>
  </mask>
  <rect id=squiggle1 mask=url(#mask1) fill=url(#patt1) width=200 height=200></rect>
  <rect id=squiggle2 mask=url(#mask2) fill=url(#patt2) width=200 height=200></rect>
  <rect id=squiggle3 mask=url(#mask1) fill=url(#patt3) width=200 height=200></rect>
  <rect id=squiggle4 mask=url(#mask2) fill=url(#patt4) width=200 height=200></rect></svg>

---

例子二

css代码

.st0{fill:none;stroke:#000000;stroke-miterlimit:10;}.st1{fill:#7100BF;stroke:#000000;stroke-miterlimit:10;}.box{width: 600px;height: 600px;}

html代码

<div class=box><svg width=200xmlns=http://www.w3.org/2000/svg viewBox=0 0 348 302 >
 <g><polygon id=XMLID_1_ class=st0 points=129,131.3 56.6,141 11.9,83.1 39.7,15.5 112.2,5.8 156.8,63.7 /><path id=XMLID_2_ class=st0 d=M-305-84/><polygon id=XMLID_3_ class=st1 points=39.7,15.5 11.9,83.1 56.6,141 84.4,73.4 /><animateTransform                         attributeName=transform                         attributeType=XML                        dur=1s                         type=translate                         from=0 0                         to=150 0                         repeatCount=indefinite/></g><g>
 <polygon id=XMLID_1_ class=st0 points=129,131.3 56.6,141 11.9,83.1 39.7,15.5 112.2,5.8 156.8,63.7 /><path id=XMLID_2_ class=st0 d=M-305-84/><polygon id=XMLID_3_ class=st1 points=39.7,15.5 11.9,83.1 56.6,141 84.4,73.4 /><animateTransform                         attributeName=transform                         attributeType=XML                        dur=1s                         type=translate                         from=150 150                         to=0 150                         repeatCount=indefinite/></g><g>
 <polygon id=XMLID_1_ class=st0 points=129,131.3 56.6,141 11.9,83.1 39.7,15.5 112.2,5.8 156.8,63.7 /><path id=XMLID_2_ class=st0 d=M-305-84/><polygon id=XMLID_3_ class=st1 points=39.7,15.5 11.9,83.1 56.6,141 84.4,73.4 /><animateTransform                         attributeName=transform                         attributeType=XML                        dur=1s                         type=translate                         from=150 0                         to=150 150                         repeatCount=indefinite/></g> <g><polygon id=XMLID_1_ class=st0 points=129,131.3 56.6,141 11.9,83.1 39.7,15.5 112.2,5.8 156.8,63.7 /><path id=XMLID_2_ class=st0 d=M-305-84/><polygon id=XMLID_3_ class=st1 points=39.7,15.5 11.9,83.1 56.6,141 84.4,73.4 /><animateTransform             attributeName=transform             attributeType=XML            dur=1s             type=translate             from=0 150             to=0 0             repeatCount=indefinite/></g></svg></div>

---

例子三

css代码

.st0{fill:#09E900;}.st1{fill:#9C55FF;}.st2{fill:#FF2A56;}.st3{fill:#FFFE6A;}.st4{fill:#2AFFF5;}#logo.animate #g1 path{animation:2s dong;}#logo.animate #g1 path#h{animation-delay:0.3s;}#logo.animate #g1 path#i{animation-delay:0.6s;}#logo.animate #g1 path#t{animation-delay:0.9s;}#logo.animate #g1 path#u{animation-delay:1.2s;}@keyframes dong{from{transform:scale(1.0);}to{transform:scale(1.1);}}

html代码

<div id=logo><svg version=1.1 id=图层_1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink x=0px y=0px viewBox=0 0 400 100 style=enable-background:new 0 0 300 100; xml:space=preserve><g id=g1><path id=s class=st0 d=M49.5,53c0-3.7,1.3-6.5,3.9-8.4c2.6-2,5.8-2.9,9.4-2.9c2.1,0,4,0.2,5.8,0.7c1.8,0.7,3.1,1.1,3.8,1.1    c0.7,0,1.3-0.1,1.7-0.4c0.5-0.2,1-0.7,1.7-1.5l1.4,12.1l-2.1,0.4c-0.9-3.2-2.5-5.7-4.6-7.5c-2.2-1.8-4.6-2.7-7.4-2.7    c-3,0-5.3,0.6-7,1.8c-1.7,1.2-2.6,2.9-2.6,5.1c0,2,0.4,3.5,1.2,4.6c0.8,1.1,2.2,1.9,4.3,2.4c1.6,0.7,3.6,1.5,6.2,2.2    c2.3,1,4.4,2,6.5,2.9c1.8,1,3.4,2.3,4.6,3.8c1.3,1.6,1.9,3.4,1.9,5.3c0,3.7-1.2,6.5-3.6,8.6c-2.4,2.1-5.9,3.1-10.4,3.1    c-3,0-5.1-0.4-6.5-1.1C56.1,82.2,54.9,82,54,82c-0.7,0-1.4,0.2-2.2,0.5c-0.8,0.4-1.7,0.8-2.6,1.3l-1-13.6l2.1-0.4    c0.7,3.9,2.2,6.8,4.4,8.8c2.3,2,5.5,2.9,9.6,2.9c3.2,0,5.6-0.6,7.4-1.8c1.7-1.2,2.6-3.1,2.6-5.5c0-1.7-0.5-3.1-1.4-4.2    c-0.9-1.1-1.8-1.9-2.7-2.4c-2.3-1-4.8-2.1-7.5-3.3c-2.7-1-5.1-2-7.2-2.9c-2.1-1-3.5-2.2-4.4-3.7C50,56.3,49.5,54.7,49.5,53z/><path id=h class=st1 d=M91.2,85.2L91,83l1.7-0.2c1.1-0.1,1.9-0.4,2.3-1c0.4-0.5,0.6-1.3,0.5-2.3L90,27.5    c-0.1-1-0.4-1.7-0.9-2.1c-0.5-0.4-1.3-0.6-2.5-0.5l-2,0.2l-0.2-2.2l3.7-0.4c0.9-0.1,1.8-0.4,2.6-1c0.9-0.6,1.7-1.4,2.5-2.5l0.7-0.1    l3.3,31c1.8-2.9,3.7-5,5.7-6.3c2-1.3,4.3-2.1,6.8-2.4c3.4-0.4,6.1,0.4,8.2,2.3c2,1.9,3.3,5,3.7,9.4l2.5,23.7c0.1,1,0.5,1.7,1.1,2.1    c0.6,0.4,1.4,0.6,2.3,0.5l1.7-0.2l0.2,2.2L115,82.7l-0.2-2.2l1.7-0.2c1.1-0.1,1.9-0.4,2.3-1c0.4-0.5,0.6-1.3,0.5-2.3l-2.4-23    c-0.4-4.1-1.3-6.8-2.7-8c-1.4-1.2-3.1-1.7-5.1-1.5c-1.8,0.2-3.7,1-5.8,2.4c-2,1.4-3.9,3.7-5.6,6.9l2.6,25.1c0.1,1,0.5,1.7,1.1,2.1    c0.6,0.4,1.4,0.6,2.3,0.5l1.7-0.2l0.2,2.2L91.2,85.2z/><line id=XMLID_189_ x1=126.4 y1=76.4 x2=117.1 y2=82.1/><path id=XMLID_190_ d=M130.8,77.4/><path id=i class=st2 d=M148.4,48.3c0.1-1,0-1.8-0.4-2.4c-0.4-0.7-1.2-1-2.3-1.2l-7.1-0.9l0.2-2.2l3.4,0.3c2,0.3,4,0.3,5.8,0.1    c1.9-0.2,3.6-0.7,5.3-1.5l0.7,0.1l-4,38.3c-0.1,1,0.1,1.7,0.6,2.3c0.5,0.5-1,1-0.1,1.1l7.1,1.2l-0.4,2.2l-24.9-4.4l0.4-2.2l9.2,1.8    c1.1,0.1,2,0,2.5-0.5c0.5-0.4,0.8-1.1,0.9-2.1L148.4,48.3z M153.9,18.5c1.1,0.1,2.2,2.9,3,3.8c0.8,0.9,1.2,2,1,3.2    c-0.1,1.2-0.7,2.3-1.7,3.1c-1,0.9-2.6,2.8-3.7,2.7c-1.1-0.1-1.6-2.2-2.4-3.3c-0.8-1.1-6.3-2.6-6.1-3.8c0.1-1.2,5.8-1.8,6.8-2.6    C151.8,20.9,152.8,18.4,153.9,18.5z/><path id=t class=st3 d=M191.8,71.6c-0.2,3.4,0.2,5.8,1.2,7.1c1.1,1.3,2.7,2,5,2.2c2.3,0.2,4.2-0.5,5.6-2    c1.5-1.5,2.5-3.7,3.2-6.6l1.7,0.9c-0.7,3.4-2.1,6.1-4.2,8.2c-2.1,2.1-4.7,3-7.9,2.8c-3.4-0.2-5.9-1.5-7.4-3.8    c-1.6-2.3-2.2-5.8-1.8-10.4l1.8-25.6l-10.2-0.7l0.2-2.2l2.7,0.2c2.7,0.2,5-0.6,6.8-2.3c1.8-1.7,3.1-4.5,3.8-8.4l0.5-2.9l2,0.1    l-1,14.3l13.7,1l-0.2,2.2l-13.7-1L191.8,71.6z/><path id=u class=st4 d=M236,80.1c2.7,0,4.9-0.7,6.9-2.2c1.9-1.5,3.1-3.8,4.1-7V47.9c0-1-0.1-1.6-0.5-2.2    c-0.5-0.6-1.1-0.7-2.3-0.7H242v-3h2.2c1.4,0,2.6,0,3.8-0.3c1.1-0.2,2.3-0.7,3.4-1.7h0.6v36.1c0,1,0.3,1.7,0.9,2.2    c0.6,0.5,1.3,0.7,2.3,0.7h1.8v2h-1.8c-1.1,0-2.3,0.1-3.4,0.5c-1.1,0.4-2.4,1.5-3.8,1.5h-1v-7.3c-1,2.7-2.7,4.7-5,6    c-2.3,1.3-4.8,2-7.8,2c-3.7,0-6.5-1.1-8.3-3.3c-1.8-2.2-2.9-5.7-2.9-10.6v-22c0-1-0.1-1.6-0.5-2.2c-0.5-0.6-1.1-0.7-2.2-0.7H218v-3    h2.3c1.4,0,2.6,0,3.8-0.3c1.1-0.2,2.3-0.7,3.4-1.7h0.6v30.6c0,3.4,0.7,5.9,2.1,7.3C231.5,79.4,233.5,80.1,236,80.1z/></g></svg></div>

js代码

var btn = document.querySelector(#btn);var logo = document.querySelector(#logo);var paths = document.querySelectorAll(#g1 path);btn.addEventListener(click, function(){logo.classList.toggle(animate);});var count = 0;for (var i = 0, l = paths.length; i < l;i++) {paths[i].addEventListener(webkitAnimationEnd,function(){count++;if(count>5){logo.classList.toggle(animate);count = 0;}})};

SVG有什么优势？

文件体积小，能够被大量的压缩
图片可无限放大而不失真(矢量图的基本特征)
在视网膜显示屏上效果极佳
能够实现互动和滤镜效果