Почему SVG никак не реагирует?

174
22 февраля 2018, 12:15

Хочу плавно отрисовать эту руку с калькулятором, нашел часть руки, её длину, но почему она никак не реагирует на изменений stroke-daharray и offset, причем любая часть свг так же 0 реакции дает, в чем ошибаюсь ?

.hand-calc-1 { 
  stroke-dasharray: 547px; 
  stroke-dashoffset: 547px; 
}
<svg version="1.1" id="layer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 842 595" style="enable-background:new 0 0 842 595;" xml:space="preserve"> 
    <style type="text/css"> 
    .st0 { 
        opacity: 0.5; 
    } 
 
    .st1 { 
        opacity: 0.5; 
        fill: none; 
        stroke: #000000; 
        stroke-width: 3; 
        stroke-miterlimit: 22.9256; 
        enable-background: new; 
    } 
    </style> 
    <g id="path"> 
        <g class="st0"> 
          <path d="M628.8,322.8C628.8,322.8,628.8,323,628.8,322.8L628.8,322.8z" /> 
          <path class="hand-calc-1" d="M650.7,438.3c-20.9,13.5-37.4,24.1-49.8,40.8c-8.6,11.4-48.9,53.9-80.2,86.8c-14.5,15.4-27.1,28.6-33.7,35.8 
    c-0.5,0.6-0.5,1.5,0.2,2.2c0.6,0.5,1.5,0.5,2-0.1c6.3-6.9,19-20.2,33.7-35.7c31.4-33,71.8-75.6,80.4-87.1 
    c12.1-16.3,28.4-26.8,49-40.1c9.8-6.4,20.6-13.3,32.5-21.9c-1.7,0-3.4,0-5.2,0C669.1,426.4,659.5,432.6,650.7,438.3z" /> 
          <path class="hand-calc-2" d="M752.1,304.5c-0.4-3.1-1.7-5.7-3.7-7.7s-4.6-3.3-7.7-3.9c-3.3-0.6-7-0.4-11.1,0.9c1.2-1.2,2.5-2.4,3.8-3.5 
    c10.8-9.7,20.1-18,5.3-39.3c-4.9-7-11.1-9-16.7-7.8c-3,0.7-5.8,2.2-8.1,4.3c-2.3,2.1-4,4.8-5,7.8c-1.8,5.7-0.7,12.4,5.5,17.9v2.7 
    h-9.9c-0.4,0-0.8,0.2-1.1,0.5c-0.5,0.6-1.4,1.6-2.5,2.8c-3.7,4.1-10,11.1-15.4,15.7c-3.4,2.9-5.5,4.2-6.7,4.4 
    c0-0.1,0.1-0.2,0.1-0.4c0.4-1.9,2.4-5,5.1-7.6l14-13.4c0.5-0.5,0.5-1.4,0-2c-0.3-0.3-0.6-0.4-1-0.4h-44.9c3.2-2.9,6.3-5.8,9.5-8.8 
    c19.2-18,31.8-38.3,60-40.5v13c0.1,0.8,0.7,1.4,1.5,1.4c2.6,0,5.1,0,7.3,0.6c2.1,0.6,4,1.8,5.6,4.1c0.4,0.6,1.3,0.8,1.9,0.4 
    c10.5-6.2,15.5-12.5,16.6-17.9c0.6-2.7,0.1-5.2-1.1-7.4c-1.2-2.1-3.2-3.8-5.7-5.1c-5.7-2.9-14.3-3.3-23.7,0V102.7 
    c0-0.8-0.6-1.4-1.4-1.4H608.8c-0.8,0-1.4,0.6-1.4,1.4v115.1c-3.9,0.8-7.5,6.7-12.8,15.1c-4.5,7.1-10.1,16-17.8,25.4 
    c-31.7,38.4-31.8,42-32.7,67.8c-0.3,7.2-0.6,16.1-1.7,28c-0.2,2.8-0.6,5.7-0.9,8.5c-0.6,5.3-1.2,10-1.2,14.3s0.5,8.1,2,11.2 
    c-4.5,3.5-9.8,10.1-15.6,20.8c-2.5,4.5-4.9,8.5-9.4,14.3c-4.6,5.9-11.3,13.5-22.4,25.3c-59.4,62.9-121.5,102.3-193.3,148l-7.7,4.9 
    c-0.6,0.5-0.8,1.3-0.4,2c0.5,0.6,1.3,0.8,2,0.4l7.7-4.9c72-45.8,134.1-85.3,193.8-148.5c11.2-11.9,18-19.6,22.6-25.5 
    c4.6-6,7.1-10.1,9.6-14.7c5.6-10.1,10.5-16.5,14.6-19.7c2.4,3.3,6.3,5.7,12.4,7.1c0.9,6.2,0.4,14.6-2,24c0,0.2-0.1,0.5,0,0.7 
    c0,0,4.2,8.4,11.1,17.2c3.5,4.4,7.6,8.9,12.2,12.7c10.3,8.4,15.5,9.4,18.1,6.2c2.4-2.9,2-9.3,1.5-16.8c-0.2-2.6-0.3-5.3-0.4-7.9 
    c-0.5-18.9,1.5-19.1,27.5-20.8c0.7-0.1,1.5-0.1,2.3-0.2c-1.4-1-2.7-2.2-4.4-2.6c-26.6,1.8-28.8,2.5-28.3,23.6 
    c0.1,2.8,0.2,5.5,0.4,8c0.4,6.9,0.8,12.8-0.9,14.9c-1.5,1.9-5.4,0.5-14.1-6.6c-4.4-3.7-8.4-8.1-11.7-12.3 
    c-6-7.6-9.8-14.6-10.5-15.9c2.2-9,2.9-17.3,2.1-23.6c3.6,0.6,8,0.9,13.3,0.9c8.6,0,15.9-1.3,22.1-3.6c0.2-0.1,0.4-0.1,0.5-0.2 
    c-1-0.6-2-1.3-2.9-2.2c-5.7,2-12.3,3.1-20,3.1c-5.5,0-9.9-0.4-13.6-1.1c-0.3-1.2-0.6-2.4-1-3.4c-1.1-2.9-2.7-5-4.7-6 
    c-2.1-1.1-4.6-1.1-7.4,0.3c-0.2,0.1-0.4,0.2-0.6,0.3c-1.3-2.6-1.7-5.8-1.7-9.5c0-4,0.5-8.7,1.1-13.9c0.3-2.6,0.6-5.4,0.9-8.5 
    c1.1-12,1.4-20.9,1.7-28.1c0.9-24.9,1-28.5,32-66.1c7.8-9.5,13.5-18.6,18-25.7c4.6-7.4,7.9-12.6,10.4-13.7v41.7 
    c-1.7,3.9-3.4,7.7-5.1,11.4c-2.3,5.3-4.5,10.2-6.3,14.6c-3.8,9.5-4.7,14.9-1.9,17.2c2.8,2.2,8.6,1,18.6-2.7 
    c12.5-4.7,24.4-14,36.5-25h44.7l-11.4,11c-3.1,3-5.3,6.6-5.9,8.9c-0.2,1.1-0.2,2,0.2,2.7c0.5,0.9,1.4,1.4,2.7,1.2 
    c1.7-0.2,4.3-1.7,8.3-5c5.6-4.7,12-11.9,15.7-16c0.9-0.9,1.6-1.7,2.1-2.3h10.7c0.8,0,1.4-0.6,1.4-1.4v-4.8c0-0.4-0.2-0.8-0.5-1.1 
    c-5.6-4.7-6.6-10.5-5.1-15.3c0.8-2.5,2.3-4.8,4.2-6.6c1.9-1.8,4.2-3.1,6.7-3.6c4.5-0.9,9.7,0.8,13.8,6.7 
    c13.3,19.3,4.9,26.9-4.9,35.6c-2.9,2.6-5.9,5.3-8.6,8.4c0,0.1-0.1,0.1-0.1,0.2c-0.7,0.4-1.3,0.8-2,1.2c-3.6,2.3-8,4.3-12.4,6.3 
    c-5.7,2.7-11.6,5.3-16.3,8.9c-7.8,5.8-11.6,11.5-12.4,16.2c-0.5,2.6,0,4.9,1.1,6.9c1.1,1.9,2.9,3.5,5.3,4.5 
    c4.8,2.1,11.9,2.2,20-0.8c8.7-3.2,19.3-8,27.4-13.7c4.7-3.3,8.5-6.8,10.7-10.5c2.3-3.9,2.8-8,0.6-12c-0.8-1.4-1.9-2.8-3.5-4.2 
    c-2.9-2.6-6.2-3.4-9.5-3.6c3.1-0.7,5.8-0.9,8.2-0.4c2.5,0.4,4.6,1.5,6.2,3.1c1.6,1.6,2.6,3.6,3,6.1c0.5,4-0.5,8.9-3.7,14.3 
    c1.4-1,3-2,4.6-2.7C752.1,311.9,752.6,307.9,752.1,304.5z M546.6,388.7c1.9-0.9,3.6-1,4.9-0.3c1.4,0.7,2.6,2.2,3.4,4.4 
    c0.2,0.5,0.4,1,0.6,1.7c-4.4-1.3-7.3-3.1-9.2-5.6C546.4,388.8,546.5,388.8,546.6,388.7z M611.6,300.3c-9,3.4-14.1,4.6-15.8,3.2 
    c-1.6-1.4-0.6-5.8,2.7-14c1.7-4.1,3.9-9.1,6.3-14.4c0.8-1.9,1.7-3.7,2.5-5.6v7.3c0,0.8,0.6,1.4,1.4,1.4h35.9 
    C633.7,287.9,622.8,296.1,611.6,300.3z M647.8,275.4H610v-12.3V218V104.1h111v113.2c0,0.8,0.6,1.4,1.4,1.4c0.3,0,0.5-0.1,0.7-0.2 
    c9.3-3.7,17.8-3.5,23.2-0.8c2,1,3.6,2.4,4.5,4c0.9,1.6,1.2,3.5,0.8,5.5c-0.9,4.5-5.2,9.9-14.2,15.4c-1.8-2.3-3.9-3.5-6.3-4.2 
    c-2.1-0.6-4.4-0.7-6.7-0.7v-13.3c0-0.8-0.6-1.4-1.4-1.4c-0.2,0-0.3,0-0.4,0c-33.7,3.3-43.1,22.8-63,41.5 
    C655.6,268.2,651.7,271.9,647.8,275.4z M678.8,299.4C678.9,299.5,678.8,299.5,678.8,299.4L678.8,299.4z M739.6,301.5 
    c1.3,1.2,2.3,2.3,2.9,3.5c1.6,3,1.2,6.1-0.6,9.2c-2,3.4-5.5,6.6-9.9,9.7c-7.9,5.5-18.3,10.3-26.8,13.4c-7.4,2.7-13.7,2.7-17.9,0.9 
    c-1.8-0.8-3.2-2-4-3.4c-0.8-1.4-1.1-3.1-0.8-5c0.7-4.1,4.2-9.1,11.3-14.4c4.5-3.4,10.2-6,15.8-8.6c4.5-2,8.9-4.1,12.7-6.5 
    c0.8-0.5,1.6-1,2.5-1.6c0.5-0.1,1.1-0.1,1.6-0.1C731.1,298.5,736,298.3,739.6,301.5z" /> 
  <path d="M678.8,299.4C678.8,299.5,678.9,299.5,678.8,299.4L678.8,299.4z" /> 
    </g> 
        <rect x="621.8" y="115.8" class="st1" width="87.5" height="36" /> 
        <rect x="621.2" y="165.8" class="st1" width="22.7" height="22.7" /> 
        <rect x="686.6" y="165.8" class="st1" width="22.7" height="22.7" /> 
        <rect x="653.9" y="165.8" class="st1" width="22.7" height="22.7" /> 
        <rect x="621.2" y="197.8" class="st1" width="22.7" height="22.7" /> 
        <rect x="686.6" y="197.8" class="st1" width="22.7" height="22.7" /> 
        <rect x="653.9" y="197.8" class="st1" width="22.7" height="22.7" /> 
        <rect x="621.2" y="231.8" class="st1" width="22.7" height="22.7" /> 
        <polygon class="st1" points="663.2,254.5 653.9,254.5 653.9,231.8 676.5,231.8 676.5,240.6 	" /> 
    </g> 
</svg>

Answer 1
  • Анимация рисования линии возможна только при выполнении условия, что патч не имеет разрывов. В вашем случае контуры руки и пальцев нарисованы двойными линиями, высока вероятность, что где-то есть разрыв целой линии, наиболее вероятно, что это произошло в точках пересечения.

- .hand-calc-1 { stroke-dasharray: 547px;
stroke-dashoffset: 547px; }

Расчёт через метод JS getTotalLength() выдает длину патча - 3788px, а не 547px

Вывод

При существующей векторной фигуре анимация при помощи stroke-dashoffset невозможна.

READ ALSO
Как правильно задать размеры SVG для фона

Как правильно задать размеры SVG для фона

Хочу сверстать на svg фоновую картинку, внутри самого svg будут разные деталиИдея в том, чтобы всю эту конструкцию без проблем можно было бы подогнать...

276
Чередование динамически блоков

Чередование динамически блоков

Привет всемВопрос такой может кто уже сталкивался есть такая верстка к примеру

155
Как развернуть вложенный блок на вессь экран по ширине?

Как развернуть вложенный блок на вессь экран по ширине?

Как сделать, чтобы зеленый блок развернулся на весь экран по ширине, при условии, что его нельзя менять его вложенность относительно того...

187
Секрет адаптивной верстки

Секрет адаптивной верстки

Специально нашел видимый пример: У нас есть 2 сайта:

188