The svg.textmorph.js's discuss from svgdotjs

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.

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.

svgdotjs / svg.textmorph.js Goto Github PK

svg.textmorph.js's Issues

Text not animatable

Some glyph not scaled properly + kerning slightly off

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