SVG Подпись Анимация Проблема

Я в основном пытаюсь использовать CSS, чтобы сделать это SVG подпись анимации случаться для моей SVG подписи: https://webdesign.tutsplus.com/tutorials/sign-on-the-dotted-line-animating-your-own-svg-signature--cms-23846 SVG Подпись Анимация Проблема

Я получил это близко, но по какой-то причине он рисует контур SVG, а не штрихи самого SVG? Я не уверен, что я делаю неправильно. Вот что я получил:

.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>

источник

2017-02-21 Amber Trask

Благодаря @chazsolo! Я немного новичок в SO, и просто смотрел, как включить код в фрагмент :). –

Я должен был рекомендовать его вместо редактирования - мои извинения! – chazsolo

Насколько я могу видеть это, проблема ваш SVG-файл.

Просто вернитесь к своему иллюстрационному инструменту и воссоздайте свою подпись только по цветной дорожке и не заполните. Тогда ваша анимация будет просто двигаться по этому пути, а не вокруг него.

Я сделал это с помощью «А» в приведенном ниже примере.

.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>

источник

2017-02-21 17:25:55 isaacT

Удивительно, я буду работать над ним в иллюстраторе. Спасибо за вашу помощь! –

SVG Подпись Анимация Проблема

ответ

Смежные вопросы