2

У меня есть шрифт. Мне нужно нарисовать слово с помощью этого шрифта, используя font-weight: bold to canvas.
И после этого мне нужно преобразовать слово в SVG Path.

Я нашел библиотеки fontkit и text-to-svg, но они не могут выделить полужирный шрифт.
Также я нашел plumin.js, но я не понимаю, как он работает, и не могу его использовать.

1

1 ответ 1

2

Преобразование текста в патч svg c использованием векторного редактора Inkscape

  • В панели инструментов редактора выбираете - текст T` F8
  • Далее выбираете нужный шрифт и его размер
  • Печатаете слово, например: Word
  • В меню редактора, выбираете Контур / Оконтурить объект shift+Ctrl+C
  • Сохраняете файл в формате *.svg Оптимизируете файл с помощью SVGOMG
  • Теперь каждая буква имеет свой path

Пример: fill="none" stroke="black"

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="840" height="1188" viewBox="0 300 744.1 1052.4" id="svg2" version="1.1">
     <g fill="none" stroke="black">
      <path id="W"  d="m250.2 375q-1.4 0.1-2.7 0.6-1.4 0.4-2.7 1.1-2 1.1-2.9 2.5-0.8 1.4-1.5 3.3-2.4 6.7-7.5 21.4-5 14.7-10.5 30.6l-8.8 0-16.5-46.4-14.9 46.4-8.8 0q-7.3-21.4-11.2-32.9-3.9-11.6-6.6-19.4-0.8-2.4-1.9-3.4-1.1-1.1-2.7-2.2-1.2-0.8-2.5-1.1-1.3-0.4-3.1-0.6l0-3.4 33.3 0 0 3.3q-2.9 0.4-4.4 0.7-1.5 0.3-2.3 0.7-0.8 0.4-1 0.7-0.2 0.4-0.2 0.7 0 0.6 0.1 1.2 0.2 0.6 0.4 1.3 1.1 3.4 4.3 13 3.2 9.6 7.9 23.8l14.2-45.4 9.3 0 16.5 46.8q3.6-11.3 5.8-18.5 2.2-7.2 3.7-12.3 0.9-3.1 1.4-5.2 0.5-2.1 0.5-3.6 0-0.9-0.9-1.6-0.8-0.7-2.3-1.1-1.2-0.4-3.2-0.6-1.9-0.3-3.4-0.4l0-3.5 25.1 0 0 3.5zM296 395.4"/>
      <path id="o" d="m296 395.4q3.3 3 5 7.3 1.7 4.2 1.7 9.1 0 4.9-1.7 9.2-1.7 4.3-4.9 7.4-3.5 3.3-8.3 5.1-4.8 1.8-11 1.8-5.4 0-9.9-1.5-4.5-1.5-8-4.6-3.3-2.9-5.3-7.3-1.9-4.4-1.9-9.7 0-5.3 1.7-9.4 1.7-4.1 5.1-7.3 3.3-3.1 8-4.7 4.8-1.7 10.7-1.7 6.2 0 10.8 1.7 4.7 1.7 8 4.7zm-11.2 30.5q1-2.5 1.4-6 0.5-3.5 0.5-8.2 0-3.1-0.4-7-0.4-4-1.3-6.2-1.1-2.8-2.9-4.4-1.8-1.6-4.7-1.6-3.1 0-5 1.7-1.8 1.7-2.9 4.4-0.9 2.5-1.3 5.9-0.4 3.3-0.4 7 0 4.8 0.3 8 0.3 3.1 1.5 6.3 1 2.7 2.9 4.3 1.9 1.6 4.8 1.6 2.6 0 4.5-1.5 1.9-1.5 3-4.4z" />
      <path id="r" d="m352.2 398.3q0 3.3-2.1 5.9-2.1 2.5-5.4 2.5-3.2 0-5.4-1.6-2.2-1.6-2.2-4.8 0-1.5 0.2-2.4 0.2-0.9 0.4-1.6-2 0.1-4.3 1.4-2.2 1.3-4 3.5l0 24.1q0 1.5 0.5 2.5 0.5 1 1.6 1.6 1 0.5 3.1 0.8 2.2 0.3 3.2 0.4l0 3.2-29.4 0 0-3.2q1.1-0.1 2.2-0.2 1.1-0.2 1.9-0.4 1.4-0.5 1.9-1.5 0.5-1 0.5-2.6l0-25.6q0-1.6-0.7-2.8-0.7-1.3-1.8-2-0.8-0.5-2-0.9-1.2-0.4-2.6-0.5l0-3.2 21-1.1 0.7 0.7 0 6.4 0.2 0q3-3.5 6.4-5.5 3.4-2 7.1-2 4.1 0 6.5 2.5 2.5 2.5 2.5 6.5z" />
      <path id="d" d="m412 432.9-21.7 1.3-0.7-0.6 0-4-0.3-0.1q-2.2 2.3-5.8 4.1-3.6 1.7-7.4 1.7-8.9 0-14.6-6.6-5.8-6.6-5.8-17.1 0-9.3 6.4-15.9 6.5-6.6 15.6-6.6 3.6 0 6.8 0.8 3.2 0.8 5.1 1.9l0-14.4q0-1.6-0.7-3-0.7-1.5-1.8-2.2-1.4-1-3.4-1.4-2-0.4-4.1-0.6l0-3.2 23.7-1.1 0.7 0.7 0 57.6q0 1.7 0.5 2.8 0.6 1.1 1.8 1.8 0.9 0.5 2.7 0.7 1.8 0.2 2.9 0.3l0 3.2zm-22.4-7.8 0-24.8q-0.3-1-0.9-2.2-0.5-1.2-1.5-2.3-0.9-0.9-2.4-1.6-1.5-0.7-3.3-0.7-4.4 0-7.2 5-2.8 5-2.8 14 0 3.6 0.5 6.4 0.5 2.8 1.8 5.1 1.3 2.3 3.3 3.6 2 1.3 4.8 1.3 2.7 0 4.4-1 1.8-1.1 3.3-2.8z" /> 
      </g>

</svg>

Пример: fill="gray" stroke="black"

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="840" height="1188" viewBox="0 300 744.1 1052.4" id="svg2" version="1.1">
     <g fill="grey" stroke="black">
      <path id="W"  d="m250.2 375q-1.4 0.1-2.7 0.6-1.4 0.4-2.7 1.1-2 1.1-2.9 2.5-0.8 1.4-1.5 3.3-2.4 6.7-7.5 21.4-5 14.7-10.5 30.6l-8.8 0-16.5-46.4-14.9 46.4-8.8 0q-7.3-21.4-11.2-32.9-3.9-11.6-6.6-19.4-0.8-2.4-1.9-3.4-1.1-1.1-2.7-2.2-1.2-0.8-2.5-1.1-1.3-0.4-3.1-0.6l0-3.4 33.3 0 0 3.3q-2.9 0.4-4.4 0.7-1.5 0.3-2.3 0.7-0.8 0.4-1 0.7-0.2 0.4-0.2 0.7 0 0.6 0.1 1.2 0.2 0.6 0.4 1.3 1.1 3.4 4.3 13 3.2 9.6 7.9 23.8l14.2-45.4 9.3 0 16.5 46.8q3.6-11.3 5.8-18.5 2.2-7.2 3.7-12.3 0.9-3.1 1.4-5.2 0.5-2.1 0.5-3.6 0-0.9-0.9-1.6-0.8-0.7-2.3-1.1-1.2-0.4-3.2-0.6-1.9-0.3-3.4-0.4l0-3.5 25.1 0 0 3.5zM296 395.4"/>
      <path id="o" d="m296 395.4q3.3 3 5 7.3 1.7 4.2 1.7 9.1 0 4.9-1.7 9.2-1.7 4.3-4.9 7.4-3.5 3.3-8.3 5.1-4.8 1.8-11 1.8-5.4 0-9.9-1.5-4.5-1.5-8-4.6-3.3-2.9-5.3-7.3-1.9-4.4-1.9-9.7 0-5.3 1.7-9.4 1.7-4.1 5.1-7.3 3.3-3.1 8-4.7 4.8-1.7 10.7-1.7 6.2 0 10.8 1.7 4.7 1.7 8 4.7zm-11.2 30.5q1-2.5 1.4-6 0.5-3.5 0.5-8.2 0-3.1-0.4-7-0.4-4-1.3-6.2-1.1-2.8-2.9-4.4-1.8-1.6-4.7-1.6-3.1 0-5 1.7-1.8 1.7-2.9 4.4-0.9 2.5-1.3 5.9-0.4 3.3-0.4 7 0 4.8 0.3 8 0.3 3.1 1.5 6.3 1 2.7 2.9 4.3 1.9 1.6 4.8 1.6 2.6 0 4.5-1.5 1.9-1.5 3-4.4z" />
      <path id="r" d="m352.2 398.3q0 3.3-2.1 5.9-2.1 2.5-5.4 2.5-3.2 0-5.4-1.6-2.2-1.6-2.2-4.8 0-1.5 0.2-2.4 0.2-0.9 0.4-1.6-2 0.1-4.3 1.4-2.2 1.3-4 3.5l0 24.1q0 1.5 0.5 2.5 0.5 1 1.6 1.6 1 0.5 3.1 0.8 2.2 0.3 3.2 0.4l0 3.2-29.4 0 0-3.2q1.1-0.1 2.2-0.2 1.1-0.2 1.9-0.4 1.4-0.5 1.9-1.5 0.5-1 0.5-2.6l0-25.6q0-1.6-0.7-2.8-0.7-1.3-1.8-2-0.8-0.5-2-0.9-1.2-0.4-2.6-0.5l0-3.2 21-1.1 0.7 0.7 0 6.4 0.2 0q3-3.5 6.4-5.5 3.4-2 7.1-2 4.1 0 6.5 2.5 2.5 2.5 2.5 6.5z" />
      <path id="d" d="m412 432.9-21.7 1.3-0.7-0.6 0-4-0.3-0.1q-2.2 2.3-5.8 4.1-3.6 1.7-7.4 1.7-8.9 0-14.6-6.6-5.8-6.6-5.8-17.1 0-9.3 6.4-15.9 6.5-6.6 15.6-6.6 3.6 0 6.8 0.8 3.2 0.8 5.1 1.9l0-14.4q0-1.6-0.7-3-0.7-1.5-1.8-2.2-1.4-1-3.4-1.4-2-0.4-4.1-0.6l0-3.2 23.7-1.1 0.7 0.7 0 57.6q0 1.7 0.5 2.8 0.6 1.1 1.8 1.8 0.9 0.5 2.7 0.7 1.8 0.2 2.9 0.3l0 3.2zm-22.4-7.8 0-24.8q-0.3-1-0.9-2.2-0.5-1.2-1.5-2.3-0.9-0.9-2.4-1.6-1.5-0.7-3.3-0.7-4.4 0-7.2 5-2.8 5-2.8 14 0 3.6 0.5 6.4 0.5 2.8 1.8 5.1 1.3 2.3 3.3 3.6 2 1.3 4.8 1.3 2.7 0 4.4-1 1.8-1.1 3.3-2.8z" /> 
      </g>

</svg>

Пример анимации контуров букв при изменении атрибута stroke-dashoffse с максимального значения до нуля

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="840" height="1188" viewBox="0 350 744.1 1052.4" id="svg2" version="1.1">
     <g fill="none" stroke="black">
      <path id="W1" stroke-dasharray="534" stroke-dashoffset="534"  d="m250.2 375q-1.4 0.1-2.7 0.6-1.4 0.4-2.7 1.1-2 1.1-2.9 2.5-0.8 1.4-1.5 3.3-2.4 6.7-7.5 21.4-5 14.7-10.5 30.6l-8.8 0-16.5-46.4-14.9 46.4-8.8 0q-7.3-21.4-11.2-32.9-3.9-11.6-6.6-19.4-0.8-2.4-1.9-3.4-1.1-1.1-2.7-2.2-1.2-0.8-2.5-1.1-1.3-0.4-3.1-0.6l0-3.4 33.3 0 0 3.3q-2.9 0.4-4.4 0.7-1.5 0.3-2.3 0.7-0.8 0.4-1 0.7-0.2 0.4-0.2 0.7 0 0.6 0.1 1.2 0.2 0.6 0.4 1.3 1.1 3.4 4.3 13 3.2 9.6 7.9 23.8l14.2-45.4 9.3 0 16.5 46.8q3.6-11.3 5.8-18.5 2.2-7.2 3.7-12.3 0.9-3.1 1.4-5.2 0.5-2.1 0.5-3.6 0-0.9-0.9-1.6-0.8-0.7-2.3-1.1-1.2-0.4-3.2-0.6-1.9-0.3-3.4-0.4l0-3.5 25.1 0 0 3.5zM296 395.4">
      <animate id="anW" attributeName="stroke-dashoffset" values="534;0" dur="4s" fill="freeze" begin="0s" />
      </path>
      <path id="o1" stroke-dasharray="252" stroke-dashoffset="252" d="m296 395.4q3.3 3 5 7.3 1.7 4.2 1.7 9.1 0 4.9-1.7 9.2-1.7 4.3-4.9 7.4-3.5 3.3-8.3 5.1-4.8 1.8-11 1.8-5.4 0-9.9-1.5-4.5-1.5-8-4.6-3.3-2.9-5.3-7.3-1.9-4.4-1.9-9.7 0-5.3 1.7-9.4 1.7-4.1 5.1-7.3 3.3-3.1 8-4.7 4.8-1.7 10.7-1.7 6.2 0 10.8 1.7 4.7 1.7 8 4.7zm-11.2 30.5q1-2.5 1.4-6 0.5-3.5 0.5-8.2 0-3.1-0.4-7-0.4-4-1.3-6.2-1.1-2.8-2.9-4.4-1.8-1.6-4.7-1.6-3.1 0-5 1.7-1.8 1.7-2.9 4.4-0.9 2.5-1.3 5.9-0.4 3.3-0.4 7 0 4.8 0.3 8 0.3 3.1 1.5 6.3 1 2.7 2.9 4.3 1.9 1.6 4.8 1.6 2.6 0 4.5-1.5 1.9-1.5 3-4.4z" >
      <animate id="ano" attributeName="stroke-dashoffset" values="252;0" dur="4s" fill="freeze" begin="anW.end+0.3s" />
      </path>
     
     <path id="r1" stroke-dasharray="217" stroke-dashoffset="217" d="m352.2 398.3q0 3.3-2.1 5.9-2.1 2.5-5.4 2.5-3.2 0-5.4-1.6-2.2-1.6-2.2-4.8 0-1.5 0.2-2.4 0.2-0.9 0.4-1.6-2 0.1-4.3 1.4-2.2 1.3-4 3.5l0 24.1q0 1.5 0.5 2.5 0.5 1 1.6 1.6 1 0.5 3.1 0.8 2.2 0.3 3.2 0.4l0 3.2-29.4 0 0-3.2q1.1-0.1 2.2-0.2 1.1-0.2 1.9-0.4 1.4-0.5 1.9-1.5 0.5-1 0.5-2.6l0-25.6q0-1.6-0.7-2.8-0.7-1.3-1.8-2-0.8-0.5-2-0.9-1.2-0.4-2.6-0.5l0-3.2 21-1.1 0.7 0.7 0 6.4 0.2 0q3-3.5 6.4-5.5 3.4-2 7.1-2 4.1 0 6.5 2.5 2.5 2.5 2.5 6.5z" >
      <animate id="anr" attributeName="stroke-dashoffset" values="217;0" dur="4s" fill="freeze" begin="ano.end-1s" />
      </path>
      <path id="d1" stroke-dasharray="343" stroke-dashoffset="343" values="217;0" d="m412 432.9-21.7 1.3-0.7-0.6 0-4-0.3-0.1q-2.2 2.3-5.8 4.1-3.6 1.7-7.4 1.7-8.9 0-14.6-6.6-5.8-6.6-5.8-17.1 0-9.3 6.4-15.9 6.5-6.6 15.6-6.6 3.6 0 6.8 0.8 3.2 0.8 5.1 1.9l0-14.4q0-1.6-0.7-3-0.7-1.5-1.8-2.2-1.4-1-3.4-1.4-2-0.4-4.1-0.6l0-3.2 23.7-1.1 0.7 0.7 0 57.6q0 1.7 0.5 2.8 0.6 1.1 1.8 1.8 0.9 0.5 2.7 0.7 1.8 0.2 2.9 0.3l0 3.2zm-22.4-7.8 0-24.8q-0.3-1-0.9-2.2-0.5-1.2-1.5-2.3-0.9-0.9-2.4-1.6-1.5-0.7-3.3-0.7-4.4 0-7.2 5-2.8 5-2.8 14 0 3.6 0.5 6.4 0.5 2.8 1.8 5.1 1.3 2.3 3.3 3.6 2 1.3 4.8 1.3 2.7 0 4.4-1 1.8-1.1 3.3-2.8z" >
      <animate id="and" attributeName="stroke-dashoffset" values="343;0" dur="4s" fill="freeze" begin="anr.end" />
      </path>     
      </g>

</svg>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.