Как анимировать path?

Question

[crdrads]

Сделал простой path в Иллюстраторе. Пытаюсь его "нарисовать" с помощью DrawSVG. Но он рисует его 2 раза - изнутри и снаружи. Как сделать так чтобы рисовался слева направо просто? https://codepen.io/dubdub/pen/NeKoGp

Comments

[Froggyweb]

у тебя path "двойной" уменьши обводку - увидешь
посробуq этот svg

<svg @click="draw" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 560">
    <title>how</title>
    <path id="path" d="M557.691,88.772c-15.81-3.49-33-7.14-48.52-0.56
			c-13.24,5.61-20.62,16.75-21,31.07c-0.21,8.78,1.05,17.56,1.12,26.35c0.126,9.155-0.526,18.305-1.95,27.35
			c-2.67,16.4-8.38,32.33-18.1,45.91c-18.55,25.91-53.58,41.22-83.76,25.58c-7.07-3.66-13.88-9.07-17.49-16.34
			c-4.6-9.28-0.73-18.07,4.87-25.88c9.72-13.55,23.53-23.35,34.14-36.13c9.17-11,16.68-25.11,14.73-39.91
			c-1.81-13.77-12-25.16-24.37-30.85c-23.7-11-66.34-6.73-75.32,22.28c-4.85,15.65,6.68,26.25,12.07,39.7
			c6.62,16.5,0.81,36.21-7,51.31c-3.76,7.26-8.71,14.23-15.64,18.77c-7.85,5.15-17.1,5.73-26.22,5.65
			c-17.78-0.159-35.5-2.081-52.9-5.74c-33-6.89-67.35-19.53-94.72-39.59c-12.39-9.22-24.63-22.61-22.74-39.32
			c1.92-17,16.99-30.9,32.82-35.61c8.24-2.43,17-2.39,24.89,1.08"/>
  </svg>

[crdrads]

Froggyweb, я понимаю что он двойной. Я не понимаю как сделать одинарный? Откуда этот код выше? Как надо делать, вы можете объяснить или как? Зачем мне этот свг в вакууме, если я спрашиваю как быть в таких случаях, принцип какой?

[crdrads]

Ну вот что это за клякса? В реале же рисуются в Иллюстраторе конкретные фигуры а не эти кляксы

[Ankhena]

crdrads,

я понимаю что он двойной. Я не понимаю как сделать одинарный?

стереть координаты второй линии

[Ankhena]

crdrads, https://codepen.io/anon/pen/LMPaEZ

[Froggyweb]

Код из иллюстратора
Для просмотра в каркасе можно использовать сочетание клавиш ctrl + Y
Инструмент рисования кривых - перо

[Froggyweb]

Ну вот что это за клякса? В реале же рисуются в Иллюстраторе конкретные фигуры а не эти кляксы

убери цвет заливки и выстави цвет контура

[crdrads]

Ankhena, класс, а как вы узнали какую часть координат удалить? Тоже в иллюстраторе?

[crdrads]

Froggyweb, спасибо за советы, вынесите отдельно отмечу решением

[Ankhena]

crdrads, можно в графическом редакторе.
Но я просто стерла примерно половину и потом еще немножко.
Изучите как рисовать с помощь path, статей полно, например
css.yoksel.ru/svg-path
или Как рисовать с помощью SVG path?

[crdrads]

Froggyweb, ваш совет не работает для квадратной формы, почему-то (а вообще конечно это все тотальный ночной кошмар)

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 318.78 295.33">
  <title>Untitled-5</title>
  <path d="M308.78,10V285.33H10V10H308.78m10-10H0V295.33H318.78V0Z"/>
</svg>

2 обводки вылазит. Я в шоке с этого СВГ. Это делалось не для людей, а я не знаю для кого.

[crdrads]

Ankhena, статья бесполезная совершенно. ЗАчем мне это? Будто я руками буду код писать с координатами)) Меня больше интересует как работать с омерзительным Иллюстратором.

[Ankhena]

crdrads, ай и правильно, зачем понимать что делаешь.

Иногда проще и быстрее в коде что-то поправить, чем даже просто открывать иллюстратор, даже не смотря на мощность компа.

Уж по иллюстратору учебников, статей, видео уроков и всяких курсов не пересчитать.

[crdrads]

Ankhena, да, я погарачился. Но я в непонимании. Раньше я думал что такое делают люди более творческого склада ума. Иллюстрации и тд. А как можно оставлять место творческому вдохновению если тут такой адище? Я немного разобрался с квадратом выше (впрочем, до сих пор не могу понять почему Иллюстратор строк ставит не так как положено, Иллюстратор это просто жесть), но уже предчувствую какой ад будет елать этот трюк на более сложных иллюстрациях.

[Ankhena]

crdrads, такие ощущения бывают при изучении новых сложных вещей. Продеретесь через заросли - станете профи )))