Hola a todos, estoy obteniendo con éxito los datos de la ruta svg usando opentype.js pero tengo problemas para usar esos datos con svg.js para representar la ruta:
A continuación se muestra mi código que actualmente crea un svg con un grupo vacío <g></g> donde esperaba que el grupo envolviera los datos de mi ruta.
Leí en otra publicación que debería usar SVG.adopt () (como lo intenté a continuación) sin éxito. Gracias por adelantado
const svg = new SVG().addTo('body').attr({ viewBox: '0 0 100 100' }) const createShape = (font,content) => { const fontPaths = font.getPaths(content,20,20,100) const paths = fontPaths.map(fontPath => { console.log(fontPath.toSVG()) const path = SVG.adopt(fontPath.toSVG()) // const svgPath = SVG(path) // // svgPath.fill('black') console.log(path) return path }) const group = svg.group() group.add(paths).attr({ fill: 'black' }) return group } const draw = (font) => { createShape(font,'hello') } opentype.load('https://assets.codepen.io/1070/basiersquare-bold-webfont.woff',(err,font) => draw(font))El método fontPath.toSVG() devolverá el marcado svg, no ningún nodo.
Mientras que group.add(paths) espera que la variable "paths" contenga nodos para agregar.
Si no le importa, sugeriría un enfoque simple de js para la generación de svg.
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); const g = document.createElementNS("http://www.w3.org/2000/svg", "g"); g.setAttribute('fill', 'black'); document.body.appendChild(svg); svg.appendChild(g); const createShape = (font, content) => { let pathMarkup = ''; const fontPaths = font.getPaths(content, 0, 100, 100) const paths = fontPaths.map(fontPath => { let path = fontPath.toSVG(); pathMarkup += path; }) g.insertAdjacentHTML('beforeend', pathMarkup); //adjust viewBox let viewBox = svg.getBBox(); svg.setAttribute('viewBox', [0, 0, (viewBox.width + viewBox.x).toFixed(2), (viewBox.height + viewBox.y).toFixed(2)].join( ' ')); } const draw = (font) => { createShape(font, 'hello') } opentype.load('https://fonts.gstatic.com/s/firasans/v15/va9B4kDNxMZdWfMOD5VnZKveRhf8.woff', (err, font) => draw(font)) svg{ width: 50vw; border: 1px solid #ccc } <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.2/svg.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/opentype.js@latest/dist/opentype.min.js"></script>El ejemplo anterior es básicamente
Como señaló @Fuzzyma, mi respuesta podría haber sido demasiado sesgada.
const svg = new SVG().addTo('body'); const group = svg.group(); const createShape = (font,content) => { let pathString = ''; const fontPaths = font.getPaths(content,0,100,100) const paths = fontPaths.map(fontPath => { let path = fontPath.toSVG(); pathString += path; return pathString }) group.svg(pathString).attr({ fill: 'black' }) return group } svg.attr({ viewBox: '0 0 226.10 101.50' }) const draw = (font) => { createShape(font,'hello') } opentype.load('https://assets.codepen.io/1070/basiersquare-bold-webfont.woff',(err,font) => draw(font)) <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.2/svg.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/opentype.js@latest/dist/opentype.min.js"></script>