Skip to content

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

License

Notifications You must be signed in to change notification settings

svgdotjs/svg.textmorph.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

svg.textmorphing.js

A plugin for the svgjs library to enable text morphing / animation. This plugin depends on svg.pathmorphing.js.

In order to morph text, we have to convert the text to paths.

So at first we need to load an svg-font which holds the path definition for every glyph:

new SVG.SVGFont(font, callback, lazyloading)
  • font can be an xml string containing a font element, an id pointing to an element containing a font element or can be a path to a file.

  • The callback is called when the font is loaded (which is neccessary when the file asynchronously loaded).

  • lazyloading specifies if the glyphs should only be pulled from the font if needed or cached all together when loading the font. This parameter is true per default which means lazyloading is active.

Example:

new SVG.SVGFont('myFont.svg', function(){
  // callback is called in context of the font

  // lets use the font
  var text = draw.morphText('ABCDEFG').font({
    family:this, // or this.family or just the font-family which is specified in the font
    size:50
  })
  
  // animate the text
  text.animate().text('GFEDCBA')

})

Dependencies

This module requires svg.js >= v2.1.1 and svg.pathmorphing.js >= 0.1.0

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published