使用svg.js和opentype.js创建svg路径
使用svg.js和opentype.js创建svg路径
提问于 2022-02-24 13:28:57
嗨，我正在使用opentype.js成功地获取svg路径数据，但是在使用svg.js来呈现路径时遇到了困难：
下面是我的代码，它当前创建了一个带有空组<g></g>的svg，在这里我期望这个组包装我的路径数据。
我在另一篇文章中看到，我应该使用SVG.adopt() (正如我在下面所做的那样)，但没有效果。提前感谢
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))回答 1
Stack Overflow用户
发布于 2022-02-24 16:34:54
opentype.js方法fontPath.toSVG()将返回svg标记，而不是任何节点。
而group.add(paths)则期望变量“path”用于连接节点。
如果您不介意的话，我建议为svg一代提供一个简单的js方法。
示例:获取字形路径并追加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>
上面的例子基本上是
附加svg和group元素的DOM
- concatenating opentype.js
- inserting返回的路径标记svg group
- adjusting svg viewBox以避免溢出(使用getBBox()获得适当的宽度和高度值)
编辑: svg.js方法
正如@Fuzzyma所指出的--我的回答可能太偏颇了。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71252755
复制相关文章
相似问题
腾讯云开发者
