1. Accueil
  2. Question et réponse
  3. SVG Signature d'animation Problèmes

SVG Signature d'animation Problèmes

2017-02-21 2 views
0

Je suis fondamentalement essayer d'utiliser les CSS pour faire cette animation signature SVG arrive pour ma propre signature SVG: https://webdesign.tutsplus.com/tutorials/sign-on-the-dotted-line-animating-your-own-svg-signature--cms-23846SVG Signature d'animation Problèmes

Je l'ai serré, mais pour une raison quelconque, il dessine les grandes lignes du Image SVG, au lieu des traits du SVG lui-même? Je ne suis pas sûr de ce que je fais mal. Voici ce que j'ai:

.signature { 
 
    max-width: 400px; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    overflow: auto; 
 
    width: 100%; 
 
    height: 0; 
 
    padding-bottom: 20%; 
 
} 
 

 
svg { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
path { 
 
    fill: none; 
 
    stroke: #2a3745; 
 
    stroke-width: 2; 
 
    stroke-linecap: round; 
 
    stroke-linejoin: round; 
 
    stroke-miterlimit: 10; 
 
} 
 

 
@keyframes write1 { 
 
    5% { 
 
     stroke-dashoffset: 890; 
 
    } 
 
    60% { 
 
     stroke-dashoffset: 0; 
 
    } 
 
} 
 

 
@keyframes write2 { 
 
    5%, 65% { 
 
     stroke-dashoffset: 915; 
 
    } 
 
    100% { 
 
     stroke-dashoffset: 0; 
 
    } 
 
} 
 

 
.stroke-A { 
 
    stroke-dasharray: 890; 
 
    animation: write1 4s 1 linear; 
 
} 
 

 
.stroke-mber { 
 
    stroke-dasharray: 915; 
 
    animation: write2 4s 1 linear; 
 
}
<div class="signature"> 
 
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
         viewBox="0 0 591.3 429.4" xml:space="preserve"> 
 
     <g> 
 
      <g> 
 
       <path class="stroke-A" d="M1.9,277.9c53.5-7.3,104.9-28.2,148.7-59.7c44.1-31.7,79.6-74.2,104.2-122.5c13.8-27.1,24.2-55.8,31.5-85.4 
 
           c-1-0.1-2-0.3-2.9-0.4c-6.4,51.9-10.7,109.6,24.8,152.7c1.1,1.3,3.2-0.4,2.4-1.8c-9.3-16.7-25.7-27.6-42.3-36.3 
 
           c-19.1-10.1-39.2-18.9-59.5-26.3C169.2,83.5,125.8,75.6,84.4,87c-19.4,5.3-37.9,14.9-51.4,30c-1.3,1.4,0.8,3.6,2.1,2.1 
 
           c24.6-27.5,64.8-36.2,100.4-34.4c43.3,2.2,84.9,19.5,123.4,38.3c18.8,9.2,38.6,20.4,49.1,39.3c0.8-0.6,1.6-1.2,2.4-1.8 
 
           c-34.9-42.3-30.2-99.6-23.9-150.5c0.2-1.7-2.5-2-2.9-0.4c-13,52.7-36.2,103-70.3,145.4c-33,41-75.7,73.6-123.8,95 
 
           c-28,12.5-57.8,20.9-88.2,25.1C-0.8,275.2,0,278.1,1.9,277.9L1.9,277.9z"/> 
 
      </g> 
 
     </g> 
 
     <g> 
 
      <g> 
 
       <path class="stroke-mber" d="M278.2,158.8c8.9-14.5,20.4-27.1,33.8-37.6c4.1-3.2,8.4-7.2,13.9-7.4c4.7-0.1,7.1,2.6,8.6,6.7c3.5,9.4,4.2,19.7,2.7,29.6 
 
           c1,0.1,2,0.3,2.9,0.4c-1.7-14.3,3.3-28.5,13.2-38.9c2.8-2.9,6.2-6.8,10.4-7.1c5.6-0.3,6.7,4.5,7.1,8.8c0.7,8.1,0.9,16.2,1.3,24.3 
 
           c0.1,1.7,2.4,2.1,2.9,0.4c2.2-7.2,10.3-19.4,18.8-12c2.4,2.1,4,4.5,7,5.9c3,1.4,6.4,1.8,9.6,1.5c15.1-1.5,21.9-16.6,25.7-29.4 
 
           c4.7-15.8,5-33.1,0.6-49c-1.1-3.9-4.3-6.9-8.6-4.7c-5,2.6-2.6,12-2.4,16.3c1.3,21.1,5.9,41.9,13.5,61.6c0.5,1.3,2.5,1.6,2.9,0 
 
           c1.8-7.5,3.8-15.4,9.6-20.9c6.2-5.9,21.6-9.4,25.3,1.4c2.4,6.9-3.5,13.9-9.3,16.8c-8.5,4.2-17.5,2.6-26.5,1.6 
 
           c-1.7-0.2-2.1,2.6-0.4,2.9c16.5,3.3,34.2,5.4,49.3-3.9c6-3.7,11.1-9.1,13.8-15.6c1.8-4.4,3.5-12.9-0.2-16.9 
 
           c-3.8-4.1-7.3,1.5-8.3,4.9c-1.4,5.2-0.2,10.8,2.4,15.3c6.2,10.7,19.9,14.8,30.9,9.1c11.2-5.8,17.3-20.8,8.4-31.1 
 
           c-0.9-1.1-3,0.1-2.5,1.5c3.7,9.5,7.4,19,11.1,28.5c0.9-0.4,1.8-0.8,2.7-1.2c-12.1-15.7,11.2-29.8,21.6-37.6 
 
           c9.1-6.9,16.1-15.5,19.3-26.5c6.2-21.3-3-43.8-21.1-56.1c-1.6-1.1-3.1,1.5-1.5,2.6c20.1,13.7,27.9,41.2,15.4,62.7 
 
           c-7.1,12.2-19.9,17.9-29.9,27.2c-8,7.4-13.9,19.6-6.4,29.3c0.9,1.2,3.4,0.6,2.7-1.2c-3.7-9.5-7.4-19-11.1-28.5 
 
           c-0.8,0.5-1.7,1-2.5,1.5c8.8,10.2-0.4,25-11.9,28c-12.1,3.1-25.8-6.3-25.3-19.3c0.1-1.9,2.2-10,4.5-4.6c1.2,3,0.2,7.4-0.8,10.3 
 
           c-2.3,6.6-7.6,12.1-13.5,15.6c-14.4,8.4-30.9,6.3-46.4,3.2c-0.1,1-0.3,2-0.4,2.9c10.9,1.3,22.8,3,32.1-4.6 
 
           c5.5-4.5,9.5-12.9,5.6-19.7c-4.7-8.3-16.8-8.5-24.3-4.3c-9.7,5.4-13,15.8-15.4,25.9c1,0,1.9,0,2.9,0 
 
           c-7.4-19.2-12.1-39.4-13.4-59.9c-0.1-2.3-1.8-17,3-14.8c3.6,1.7,4.1,13.1,4.5,16.4c1,9.7,0.5,19.5-1.7,29 
 
           c-2.1,8.9-5.2,19-11.6,25.8c-3.5,3.8-8.1,6.2-13.3,6.5c-5.5,0.4-8.9-1.8-12.7-5.5c-10.5-10.3-21.5,1.6-24.9,12.3 
 
           c1,0.1,2,0.3,2.9,0.4c-0.3-5.9-0.6-11.8-1-17.7c-0.2-4,0.1-8.6-1.4-12.4c-2.5-6.5-10.1-7.4-15.4-3.6 
 
           c-14.4,10.2-22.3,29.4-20.2,46.7c0.2,1.5,2.7,2.2,2.9,0.4c1.8-12.2,1.6-47.3-19.8-38.9c-4.5,1.8-8.5,5.5-12.3,8.5 
 
           c-4.4,3.5-8.5,7.3-12.5,11.3c-7.6,7.7-14.3,16.2-19.9,25.4C274.6,158.9,277.2,160.4,278.2,158.8L278.2,158.8z"/> 
 
      </g> 
 
     </g> 
 
    </svg> 
 
</div>

Source

2017-02-21 Amber Trask

+0

Merci @chazsolo! Je suis un peu nouveau à SO, et je cherchais juste comment mettre le code dans un extrait :). –

+0

J'aurais dû le recommander au lieu d'éditer - mes excuses! – chazsolo

Répondre

0

Pour autant que je peux le voir, le problème est votre svg fichier.

juste revenir à votre illustration-outil et de recréer votre signature avec juste un chemin coloré et sans remplissage. Ensuite, votre animation se déplacera simplement le long de ce chemin et non autour.

j'ai fait juste avec le « A » dans l'exemple ci-dessous.

.signature { 
 
    max-width: 400px; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    overflow: auto; 
 
    width: 100%; 
 
    height: 0; 
 
    padding-bottom: 20%; 
 
} 
 

 
svg { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
path { 
 
    fill: none; 
 
    stroke: #2a3745; 
 
    stroke-width: 2; 
 
    stroke-linecap: round; 
 
    stroke-linejoin: round; 
 
    stroke-miterlimit: 10; 
 
} 
 

 
@keyframes write1 { 
 
    5% { 
 
     stroke-dashoffset: 890; 
 
    } 
 
    60% { 
 
     stroke-dashoffset: 0; 
 
    } 
 
} 
 

 
@keyframes write2 { 
 
    5%, 65% { 
 
     stroke-dashoffset: 915; 
 
    } 
 
    100% { 
 
     stroke-dashoffset: 0; 
 
    } 
 
} 
 

 
.stroke-A { 
 
    stroke-dasharray: 890; 
 
    animation: write1 4s 1 linear; 
 
} 
 

 
.stroke-mber { 
 
    stroke-dasharray: 915; 
 
    animation: write2 4s 1 linear; 
 
}
<div class="signature"> 
 
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 591.3 429.4" style="enable-background:new 0 0 591.3 429.4;" xml:space="preserve"> 
 

 
    <g> 
 
     <g> 
 
      <path class="stroke-A" d="M1.9,277.9c0,0,217-19.4,281.7-268.3c0,0-14.1,118,27,151.2c0,0-158.3-140.8-277.6-43.8"/> 
 
     </g> 
 
    </g> 
 
    <g> 
 
     <g> 
 
      <path 
 
       class="stroke-mber" 
 
       d="M278.2,158.8c8.9-14.5,20.4-27.1,33.8-37.6c4.1-3.2,8.4-7.2,13.9-7.4c4.7-0.1,7.1,2.6,8.6,6.7c3.5,9.4,4.2,19.7,2.7,29.6 
 
\t \t \t \t c1,0.1,2,0.3,2.9,0.4c-1.7-14.3,3.3-28.5,13.2-38.9c2.8-2.9,6.2-6.8,10.4-7.1c5.6-0.3,6.7,4.5,7.1,8.8c0.7,8.1,0.9,16.2,1.3,24.3 
 
\t \t \t \t c0.1,1.7,2.4,2.1,2.9,0.4c2.2-7.2,10.3-19.4,18.8-12c2.4,2.1,4,4.5,7,5.9s6.4,1.8,9.6,1.5c15.1-1.5,21.9-16.6,25.7-29.4 
 
\t \t \t \t c4.7-15.8,5-33.1,0.6-49c-1.1-3.9-4.3-6.9-8.6-4.7c-5,2.6-2.6,12-2.4,16.3c1.3,21.1,5.9,41.9,13.5,61.6c0.5,1.3,2.5,1.6,2.9,0 
 
\t \t \t \t c1.8-7.5,3.8-15.4,9.6-20.9c6.2-5.9,21.6-9.4,25.3,1.4c2.4,6.9-3.5,13.9-9.3,16.8c-8.5,4.2-17.5,2.6-26.5,1.6 
 
\t \t \t \t c-1.7-0.2-2.1,2.6-0.4,2.9c16.5,3.3,34.2,5.4,49.3-3.9c6-3.7,11.1-9.1,13.8-15.6c1.8-4.4,3.5-12.9-0.2-16.9 
 
\t \t \t \t c-3.8-4.1-7.3,1.5-8.3,4.9c-1.4,5.2-0.2,10.8,2.4,15.3c6.2,10.7,19.9,14.8,30.9,9.1c11.2-5.8,17.3-20.8,8.4-31.1 
 
\t \t \t \t c-0.9-1.1-3,0.1-2.5,1.5c3.7,9.5,7.4,19,11.1,28.5c0.9-0.4,1.8-0.8,2.7-1.2C536.3,104.9,559.6,90.8,570,83 
 
\t \t \t \t c9.1-6.9,16.1-15.5,19.3-26.5c6.2-21.3-3-43.8-21.1-56.1c-1.6-1.1-3.1,1.5-1.5,2.6c20.1,13.7,27.9,41.2,15.4,62.7 
 
\t \t \t \t c-7.1,12.2-19.9,17.9-29.9,27.2c-8,7.4-13.9,19.6-6.4,29.3c0.9,1.2,3.4,0.6,2.7-1.2c-3.7-9.5-7.4-19-11.1-28.5 
 
\t \t \t \t c-0.8,0.5-1.7,1-2.5,1.5c8.8,10.2-0.4,25-11.9,28c-12.1,3.1-25.8-6.3-25.3-19.3c0.1-1.9,2.2-10,4.5-4.6c1.2,3,0.2,7.4-0.8,10.3 
 
\t \t \t \t c-2.3,6.6-7.6,12.1-13.5,15.6c-14.4,8.4-30.9,6.3-46.4,3.2c-0.1,1-0.3,2-0.4,2.9c10.9,1.3,22.8,3,32.1-4.6 
 
\t \t \t \t c5.5-4.5,9.5-12.9,5.6-19.7c-4.7-8.3-16.8-8.5-24.3-4.3c-9.7,5.4-13,15.8-15.4,25.9c1,0,1.9,0,2.9,0 
 
\t \t \t \t c-7.4-19.2-12.1-39.4-13.4-59.9c-0.1-2.3-1.8-17,3-14.8c3.6,1.7,4.1,13.1,4.5,16.4c1,9.7,0.5,19.5-1.7,29 
 
\t \t \t \t c-2.1,8.9-5.2,19-11.6,25.8c-3.5,3.8-8.1,6.2-13.3,6.5c-5.5,0.4-8.9-1.8-12.7-5.5c-10.5-10.3-21.5,1.6-24.9,12.3 
 
\t \t \t \t c1,0.1,2,0.3,2.9,0.4c-0.3-5.9-0.6-11.8-1-17.7c-0.2-4,0.1-8.6-1.4-12.4c-2.5-6.5-10.1-7.4-15.4-3.6 
 
\t \t \t \t c-14.4,10.2-22.3,29.4-20.2,46.7c0.2,1.5,2.7,2.2,2.9,0.4c1.8-12.2,1.6-47.3-19.8-38.9c-4.5,1.8-8.5,5.5-12.3,8.5 
 
\t \t \t \t c-4.4,3.5-8.5,7.3-12.5,11.3c-7.6,7.7-14.3,16.2-19.9,25.4C274.6,158.9,277.2,160.4,278.2,158.8L278.2,158.8z"/> 
 
     </g> 
 
    </g> 
 
</svg> 
 

 

 

 
</div>

Source

2017-02-21 17:25:55 isaacT

+0

Génial, je vais travailler dessus dans l'illustrateur. Merci de votre aide! –

 Questions connexes

  • Aucun problème connexe^_^