Hi all I'm getting successfully grabbing svg path data using opentype.js but having trouble using that data with svg.js to render the path:
Below is my code which currently creates an svg with an empty group <g></g> where I was expecting the group to wrap my path data.
I read on another post that I should be using SVG.adopt() (as I have tried below) to no avail. Thanks in advance
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))
opentype.js method fontPath.toSVG() will return svg markup – not any nodes.
Whereas group.add(paths) expects the variable "paths" to conatain nodes for appending.
If you don't mind I'd suggest a plain js approach for svg generation.
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>The above example is basically
As @Fuzzyma pointed out – my answer might have been too biased.
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>