Closed plagasul closed 4 years ago
This is a shortened example of how the script works, I am using cheerio .
const cheerio = require('cheerio');
const args = process.argv.slice(2);
var fs = require('fs');
var svg2ttf = require('svg2ttf');
fs.readFile(args[0], function read(err, data) {
if (err) {
throw err;
}
// convert to string and pass to cheerio
var svgFont = data.toString();
const $ = cheerio.load(svgFont, {
normalizeWhitespace: true,
xmlMode: true
});
// loop all glyph tags
$("glyph").each(function(i,el){
var path = $(this).attr("d"); // the glyph's path
//
// DO THE WARP TO THE PATH???
//
$(this).attr("d", path); // update it
})
// update the svg font string data as xml
svgFont = $.xml();
// write the font to disk as ttf
var ttf = svg2ttf(svgFont, {});
fs.writeFileSync(args[1], new Buffer(ttf.buffer));
}
Note that I don't currently see how to work with warpjs without it being done in a browser. I've tried a few Node DOM parsers like JSDOM and domino, and no luck so far. There are dependencies on SVG dom elements that don't appear to be available in these server-side DOMs. I doubt Cheerio/htmlparser2 is much different.
Maybe @benjamminf has some thoughts on how one could use this library server side as it seems I'm not alone in needing this.
Bit late to the party here. But @jboarman you're right in this isn't very easily usable outside of the web browser. I had enough foresight to separate out the DOM-specific code from the algorithmic code, so you can get it to run in Node.js with a bit (or a lot) of bending. https://github.com/benjamminf/warpjs/tree/master/src/path contains all the code to parse/encode path strings, interpolate paths with points, and transform them with your custom transformer.
The things you'll be missing though are converting non-path elements to path elements, which is done in https://github.com/benjamminf/warpjs/blob/master/src/svg/normalize.js
This is a question, not an issue. I would like to use warp on a single glyph from a .svg font, in a node script.
Right now I am loading the .svg font file as a string, looping over the glyphs, and doing things to each glyph's 'd' parameter data. This is the path that draws the glyph.
I would like to pass either the path(as string) or the glyph (as a string) to the warp object, manipulate it, and then return the path/glyp (still as string) so I can update it on the string that represents the font file and then write it to disk.
Can this be done, or does warp need the full svg? Also, can I pass string to warp, and how do I return it or update it ?
Thank you