Maison >interface Web >Tutoriel H5 >Explication détaillée du cas SVG

Explication détaillée du cas SVG

零下一度
零下一度original
2017-06-30 15:27:051883parcourir

Plusieurs petits cas de SVG

J'utilise souvent SVG récemment. J'ai fait quelques exemples simples quand je m'ennuyais. J'espère que cela pourra aider tout le monde. J'utiliserai SVG pour faire des animations et des images. beaucoup plus pratique. Jetons un coup d'œil à un petit exemple ! !
1. Exemple 1

Explication détaillée du cas SVG

code 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;
  }}
code 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>

Exemple 2

Explication détaillée du cas SVG

code css
.st0{fill:none;stroke:#000000;stroke-miterlimit:10;}.st1{fill:#7100BF;stroke:#000000;stroke-miterlimit:10;}.box{width: 600px;height: 600px;}
code html
<div class="box"><svg width="200"xmlns="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>

Exemple 3

Explication détaillée du cas SVG

code 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);}}
code 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>
code 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;}})};

Quels sont les avantages du SVG ?

La taille du fichier est petite et peut être beaucoup compressée
L'image peut être agrandie à l'infini sans distorsion (la caractéristique de base des graphiques vectoriels)
L'effet est excellent sur l'écran Retina
Capable d'obtenir des effets d'interaction et de filtre

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn