Explication détaillée du cas SVG

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

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

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

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!