D3js: Как преобразовать текст SVG в путь?

Есть ли способ D3.js преобразовать текстовый элемент в элемент пути?

Поэтому, когда я понял сгенерированный svg, я мог сохранить свои текстовые формы.

Источник

6 ответов

В JavaScript (d3 или любом другом инструменте) нет способа получить доступ к векторной информации о форме отдельных букв в системных или веб-шрифтах. Это запрошенная функция для SVG 2, но нет никаких твердых предложений о том, как она будет работать.

Метод Рафаэля, описанный в вопросе, связанном с Ларсом Коттоффом, использует объект шрифта, который уже был преобразован в JavaScript с использованием утилиты генератора шрифтов Cufon. К сожалению, Cufon был разработан для старого языка IE VML, а не SVG, поэтому вам потребуется добавить дополнительное преобразование (или использовать Raphael) для преобразования в данные пути SVG.

Для работы с SVG может быть так же просто использовать общий инструмент преобразования шрифтов для преобразования в SVG-шрифты, а затем извлечь данные глифа и преобразовать их (до нужного размера и перевернуть ось Y). С другой стороны, если вы работаете на сервере, вы можете использовать низкоуровневую графическую библиотеку, такую ​​как Cairo, которая может выполнять преобразование текста в путь. К сожалению, поддержка шрифтов SVG в браузерах настолько плоха, что вы не можете использовать ее для непосредственного встраивания данных шрифтов. (Даже если у вас есть права на распространение шрифта, но вы не используете веб-шрифты по другим причинам).

Обновление: упоминание Inkscape в комментариях напомнило мне, что Inkscape также имеет интерфейс командной строки для преобразования / экспорта файлов SVG. Вы можете использовать его в рабочем процессе сервера; text-to-path является одним из вариантов экспорта. Вам нужно найти способ настроить его так, чтобы программа Inkscape на вашем сервере имела доступ к полному шрифту, а затем перенести SVG, созданный вашей подпрограммой d3, через Inkscape с такими параметрами:

inkscape TEMP.FILENAME --export-plain-svg=FILENAME --export-text-to-path

Единственный параметр преобразования текста в изображение в DOM - это холст HTML; Вы можете написать на холсте, а затем захватить данные изображения. Но это будет изображение PNG, а не вектор.

Однако я также призываю вас подумать, действительно ли вам нужны точные формы букв в конкретном шрифте, и стоит ли терять функциональность, доступность и преимущества SEO, связанные с использованием текста в качестве текста.

Источник

Существует модуль узла с именем text-to-svg, который утверждает, что делает это:

Преобразование текста в SVG-путь без собственных зависимостей.

пример

const TextToSVG = require('text-to-svg');
const textToSVG = TextToSVG.loadSync();

const attributes = {fill: 'red', stroke: 'black'};
const options = {x: 0, y: 0, fontSize: 72, anchor: 'top', attributes: attributes};

const svg = textToSVG.getSVG('hello', options);

console.log(svg);
Источник

Попробуйте мою библиотеку — svg-text-to-path

  • поддержка шрифтов otf/ttf;
  • интегрирован с Google Fonts;
  • поддержка цпан;
  • библиотека различных шрифтов;
  • поддержка свойств text-anchor и доминирующей базовой линии CSS;
  • поддержка nodejs и среды выполнения браузера;
Источник

Все эти модули узла text-to-svg, упомянутые выше, используют opentype.js.

Я решил использовать его напрямую с большим успехом:

https://github.com/opentypejs/opentype.js#pathtosvgdecimalplaces

Источник

Существует также недавно добавленный модуль узла под названием svg-text-to-vector , который определенно делает это. Вам просто нужно предоставить файл svg, и он вернет его со всеми текстовыми тегами внутри, преобразованными в путь.

Вы можете загрузить и сохранить как файл, Base64, буфер или строку SVG .

Пример

      var options={
load:'file.svg',
save:'file-convert.svg'
}   

const convert = await svgTextPath.getPath(options);

Также поддерживает добавление шрифтов как во время выполнения, так и вручную. Имена и пути шрифтов загружаются из файла svg-text-to-vector/config/fonts.json

Время выполнения

  • Динамически добавлять шрифты с ключом/значением json {"имя", "путь"}. Каждый шрифт необходимо добавить только один раз для дальнейшего использования.
       var font={'name':'Lexend Tera','path': '/lexend_tera.ttf'};

const addFonts = await svgTextPath.push(font);

Руководство

  • Откройте svg-текст-вектор/config/fonts.json

{ "font":[ { "name":"Times New Roman", "path":"./public/fonts/times.ttf" } ] }

  • Просто добавьте больше шрифтов в json

{ "font":[ { "name":"Times New Roman", "path":"./public/fonts/times.ttf" }, { "name":"Anton", "path":"./ public/fonts/anton.ttf" } ] }

Нажмите здесь, чтобы преобразовать в файл образца пути

Источник

https://danmarshall.github.io/google-font-to-svg-path/

https://github.com/danmarshall/google-font-to-svg-path

Погрузитесь в его репо, чтобы узнать способы, или просто воспользуйтесь созданным им инструментом.

Спасибо Дэну Маршаллу!

Источник
Другие вопросы по тегам