svg.textmorph.js
svg.textmorph.js copied to clipboard
svgdotjs
Some glyph not scaled properly + kerning slightly off
First of all, thanks for creating this plugin. :)
I'm using the following example. The font can be found here: https://gitlab.com/oskay/svg-fonts/-/blob/master/fonts/Hershey/HersheySans1.svg
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>SVG.js</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/svg.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/svg.pathmorphing.min.js"></script>
<script src="lib/svg.textmorph.min.js"></script>
</head>
<body>
<div id="drawing"></div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(event) {
var draw = SVG('drawing').viewbox(0, 0, 300, 300);
new SVG.SVGFont('svg_fonts/HersheySans1.svg', function(){
var text = draw.morphText('fghijklmnop').font({
family: this,
size:50
});
text.fill('none').stroke({ width: 1 })
// text.animate().text('GFEDCBA')
})
})
</script>
</body>
</html>
The glyph "l" doesn't seem to be scaled properly and appears much taller than it should:
On another note, unfortunately the kerning seems to be slightly off (noticable between "j" and "k"). This is the result of an Inkscape plugin which seems to be a bit better. Any idea what's causing this?:
Thanks.
Oh I wasn't aware that someone actually uses this :D. It is not up to date and not maintained atm therefore I don't really know what's wrong. The sizing issue looks like a rounding error (or NaN somewhere in the calculation) and the kerning is taken from the font file as far as I know.
Thanks for getting back to me. Yes, I was very happy to come across your plugin and see that it existed.
I'm looking into writing a web app that renders and exports text from SVG fonts. I've looked into other options and think it will be best to roll my own implementation. Since it won't be based on this plugin this is not really an issue for me anymore.
Oh I wasn't aware that someone actually uses this :D.
Maybe it would be good to add a full working example (like the one above) to help people with only a little experience using svg.js to get started more quickly.
This plug in actually uses code which is not ready for the newest version of svg.js v3 yet. It probably never will. So yeah you are better off using your own implementation :D.