Giters

svgdotjs / svg.textmorph.js

A plugin for the svg.js library to enable text morphing / animation

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Some glyph not scaled properly + kerning slightly off

jvolker opened this issue · comments

commented

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/svg.js@2.7.1/dist/svg.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/svg.pathmorphing.js@0.1.3/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:
grafik

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?:
grafik

Thanks.

commented

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.

commented

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.

commented

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.