Персонализация SVG без использования свойств штриха

Question

Я пытаюсь работать над анимацией почерка SVG. Я уже изучил некоторые учебники, но все они используют свойства SVG-штрихов, и это не совсем работает для меня, потому что в моей ситуации анимация должна быть на fill, а не на stroke.

я нашел, что такие вещи, как:

svg path { 
    fill: none; 
    stroke: #000; 
    stroke-width: 1; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-dasharray: 1700; 
    stroke-dashoffset: 1700; 
    -webkit-animation: dash 5s linear forwards; 
    animation: dash 5s linear forwards; 
} 

@-webkit-keyframes dash { 
    to { 
    stroke-dashoffset: 0; 
    } 
} 

@keyframes dash { 
    to { 
    stroke-dashoffset: 0; 
    } 
} 

Вот SVG Я работаю на: http://codepen.io/boyporreta/pen/BNewgG

Есть ли способ, чтобы создать эту анимацию, используя fill вместо stroke?

Заранее спасибо.

Answer 1

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

Каллиграфия делает это немного сложнее, поскольку в svg нет встроенной поддержки переменной ширины штрихов. Тем не менее, может оказаться приемлемым сделать анимацию clip-path с использованием кода анимации, который вы указали, но на «грубой копии» исходного пути, который был преобразован только в толстый штрих, без заполнения. То, что clip-path затем может быть применено к исходному пути в вашем примере, чтобы создать впечатление о каллиграфическом штрихе.

Другой вариант - не использовать путь, а рисовать все с большим количеством маленьких прямоугольников вдоль пути. Это подразумевает использование javascript вместо анимации css.

Answer 2

Я думал, что пойду по предложенному мной методу Эрика. Сочетание техники тактных животворящей from here с его предложением клипа я придумал this

.pentip { 
 
    stroke-linecap:round; 
 
    stroke-linejoin:round; 
 
    fill:none; 
 
    stroke:#e21b1b; 
 
    stroke-width:15; 
 
    stroke-dasharray: 1454; 
 
    stroke-dashoffset: 1454; 
 
    animation: dash 5s linear forwards; 
 
} 
 

 
@keyframes dash { 
 
    to { 
 
    stroke-dashoffset: 0; 
 
    } 
 
}

<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet"> 
 

 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 341.61432 138.25008"> 
 
    <defs> 
 
     <clipPath id="svgTextPath"> 
 
      <text x="10" y="94" 
 
        font-family='Pacifico' 
 
        font-size="95">Monkey</text> 
 
     </clipPath> 
 
    </defs> 
 
    
 
<g clip-path="url(#svgTextPath)"> 
 
    <path class="pentip" d="M7.6 39.8l17.5-22 5.6 5.7-3.4 52-3 17.2L46.5 30s9.2-13.3 15-11c10.2 4.2-1.3 74-1.3 74S82 16 93.6 19.6c20.2 6-6 64 6.3 67.4 12.2 3.4 21-15 21-15l6.4-16.2 15.2-1s-19.4 5.7-19.4 6.7l-1 21.5 10.7 6.3L144 73l-8-20.4L164.5 69l2-17.7L163 90l22-36.3-.2 33.5 20.2-8.4 3-42.7 14.3-28.5 8.5 4.5s-13 46.4-14.2 47.2c-1 .7-12 28-12 28l15.2-19.6s13.6-18 17.8-12.6c4.2 5.2-11.8 28.3-11.8 28.3s-1 5.8 8 5.5c8.8-.3 19.3-14.4 25.3-16.3 6-1.8 17.6-11.2 11.5-16.7-6-5.6-21.2-1-21 8 .3 9.3 0 24.7 11.3 24.7s21.3-3 23.6-10.7c2.4-8 9.5-28.3 7-25.7-2.3 2.7-11.7 15-8.8 24.7 3 9.7 9 16.6 16 10.3 7-6.3 17.3-35.4 14.7-33.6-2.6 1.8-12 61.6-12 61.6l-12.8 15.8-12-2.7s2-4 7.2-12.2c5.3-8 32-24 36-27.3 4-3 14.6-17.3 14.6-17.3"/> 
 
    </g> 
 
</svg>

You'd obviously be a bit more careful with your stroke creation!