D3js: ¿Cómo convertir texto svg a ruta?

¿Hay una forma D3.js de convertir un elemento de texto en un elemento de ruta?

Así que cuando capto el svg generado, podría mantener mi forma de los textos.

No hay forma en JavaScript (d3 o cualquier otra herramienta) para acceder a la información de la ruta del vector sobre la forma de las letras individuales en las fonts del sistema o web. Es una característica solicitada para SVG 2, pero no hay propuestas firmes sobre cómo funcionaría.

El método de Raphael descrito en la pregunta vinculada por Lars Kotthoff utiliza un objeto de fuente que ya se ha convertido a JavaScript, usando la utilidad del generador de fuente de Cufon . Desafortunadamente, Cufon fue diseñado para el antiguo lenguaje VML de IE, no para SVG, por lo que necesitaría agregar una conversión adicional (o usar Raphael) para convertir los datos de la ruta SVG.

Para trabajar con SVG, podría ser tan fácil utilizar una herramienta de conversión de fuente general para convertir a fonts SVG, luego extraer los datos de glifo y transformarlos (al tamaño correcto y voltear el eje y). Alternativamente, si está trabajando en un servidor, podría considerar el uso de una biblioteca de gráficos de bajo nivel como Cairo, que puede realizar la conversión de texto a ruta. Desafortunadamente, el soporte de fonts SVG en los navegadores es tan deficiente que no se puede usar para incrustar los datos de fonts directamente. (Incluso suponiendo que usted tuviera los derechos para distribuir la fuente, pero no utilizara fonts web por otros motivos).

Actualización: la mención de Inkscape en los comentarios me recordó que Inkscape también tiene una interfaz de línea de comandos para convertir / exportar archivos SVG . Es posible que pueda utilizarlo en un flujo de trabajo del servidor; text-to-path es una de las opciones de exportación. Tendría que encontrar una manera de configurarlo para que el progtwig Inkscape en su servidor tenga acceso a la fuente completa, y luego traslade el SVG creado por su rutina d3 a través de Inkscape con opciones como:

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

La única opción de texto a imagen en el DOM es el canvas HTML; puedes escribir en el canvas y luego tomar los datos de la imagen. Pero eso sería una imagen PNG, no un vector.

Sin embargo, también lo insto a considerar si realmente necesita las formas exactas de las letras en una fuente específica, y si vale la pena perder la funcionalidad, la accesibilidad y los beneficios de SEO que se derivan del uso del texto como texto.

Hay un módulo de nodo llamado text-to-svg que dice hacerlo:

Convertir texto a ruta SVG sin dependencias nativas.

Ejemplo

 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);