Greetings everyone! I have successfully managed to grab SVG path data using opentype.js, but I'm encountering some difficulties when trying to use that data with svg.js in order to render the path:
Below is the code snippet that I am currently working on. It creates an SVG element with an empty group <g></g>, whereas I was expecting the group to wrap around my path data.
I came across a suggestion in another post that advised me to utilize SVG.adopt() (which I have attempted below) but unfortunately it did not work as expected. Thank you in advance for your help.
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))