The svg.textmorph.js from 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.

Text not animatable

Hello

I can't figure out how to animate my SVG font which I exported from Illustrator.

This is a relevant piece of my javascript:

if (SVG.supported) {
  var draw = SVG( elID );
  new SVG.SVGFont('/fonts/someones-open-sans.svg', function(){
    // callback is called in context of the font

    // lets use the font
    var text = draw.morphText('!').font({
      family: 'OpenSans-Light', // or this.family or just the font-family which is specified in the font
      size:72,
    });

    // animate the text
    text.attr({fill: '#fff', 'fill-opacity': 0.5, stroke: '#fff', 'stroke-width': 1}).animate(3000).attr().text('GFEDCBA');

  });
}

Here is the contents of the SVG file:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1366 768" style="enable-background:new 0 0 1366 768;" xml:space="preserve">
<style type="text/css">
	.st0{font-family:'OpenSans-Light';}
	.st1{font-size:72px;}
</style>
<font horiz-adv-x="2048">
<!-- Copyright: Copyright 2017 Adobe System Incorporated. All rights reserved. -->
<font-face font-family="OpenSans-Light" units-per-em="2048" underline-position="-154" underline-thickness="102"/>
<missing-glyph horiz-adv-x="1229" d="M193,1462l841,0l0,-1462l-841,0M297,104l633,0l0,1254l-633,0z"/>
<glyph unicode="!" horiz-adv-x="492" d="M276,377l-61,0l-29,1085l119,0M164,78C164,143 191,176 244,176C299,176 326,143 326,78C326,13 299,-20 244,-20C191,-20 164,13 164,78z"/>
<glyph unicode="?" horiz-adv-x="862" d="M293,377l0,37C293,496 306,563 331,615C356,667 402,723 469,782l91,79C608,902 642,942 663,982C684,1022 694,1068 694,1120C694,1205 666,1272 611,1322C555,1372 482,1397 391,1397C338,1397 289,1391 243,1380C197,1368 147,1349 94,1323l-37,80C130,1435 192,1456 242,1467C291,1478 342,1483 395,1483C517,1483 613,1450 683,1385C753,1319 788,1229 788,1114C788,1069 782,1029 770,995C758,961 741,930 720,901C698,872 672,844 641,817C610,790 576,760 539,729C496,693 464,660 441,631C418,601 401,570 391,537C380,504 375,456 375,391l0,-14M260,78C260,143 287,176 340,176C395,176 422,143 422,78C422,13 395,-20 340,-20C287,-20 260,13 260,78z"/>
<glyph unicode="&#x2022;" horiz-adv-x="770" d="M231,748C231,807 245,852 272,883C299,913 336,928 385,928C434,928 472,912 499,881C526,850 539,805 539,748C539,691 525,647 498,615C471,583 433,567 385,567C337,567 299,583 272,614C245,645 231,690 231,748z"/>
</font>

<text transform="matrix(1 0 0 1 368.835 155.3301)" class="st0 st1">!</text>
<text transform="matrix(1 0 0 1 296.2061 156.8867)" class="st0 st1">?</text>
<text transform="matrix(1 0 0 1 211.4741 154.3506)" class="st0 st1">•</text>
</svg>

The error I get in Safari's console is: Text not animatable.

svgdotjs / svg.textmorph.js Goto Github PK

svg.textmorph.js's People

Contributors

Stargazers

Watchers

Forkers

svg.textmorph.js's Issues

Some glyph not scaled properly + kerning slightly off

Text not animatable

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent