text2svg v1.0.1
text2svg
Convert text to svg path
Install
$ npm install --save text2svg
Usage
var Text2svg = require('text2svg');
var text2svg = new Text2svg('localFontPath');
var svg = text2svg.toSVG('something', options);
API
Constructor
There are three ways to get an instance of Text2svg
:
- new Text2svg('localFontPath')
- Text2svg.loadSync('localFontPath')
- Text2svg.load('fontUrl', callback)
The callback
function looks like:
function (text2svg) {
// ...
}
toPathData(text, options)
Convert the text
to path data, which is the attribute value of d
in the <path>
element. Return:
{
width : width, // Int, total width
height : height, // Int, total Height
pathData: pathData // Array/String
}
If options.divided
is true
the pathData will be an Array.
toPath(text, options)
Convert the text
to <path>
element(s). Return:
{
width : width, // Int, total width
height : height, // Int, total Height
pathData: pathData // Array/String
path : path // Array/String
}
toSVG(text, options)
Convert the text
to <svg>
element. Return:
{
width : width, // Int, total width
height : height, // Int, total Height
pathData: pathData // Array/String
path : path // Array/String
svg : svg // String
}
Options
x
Horizontal position of the beginning of the text. (default: 0)
y
Vertical position of the baseline of the text. (default: 0)
fontSize
Size of the text. (default: 72)
spacing
The letter spacing. (default: 0)
kerning
If true
takes kerning
information into account. (default: true
)
divided
If true
generates individual path for every char. (default: false
)
grouped
If true
groups the individual <path>
with <g></g>
element. (default: false
)
This option only works for toSVG()
.
title
If specified will generate a <title>
at the root of <svg>
. (default: text
)
This option only works for toSVG()
.
desc
If specified will generate a <desc>
at the root of <svg>
. (default: null
)
This option only works for toSVG()
.
Styling the elements
Specify the padding of the <path>
relative to the <svg>
:
- options.padding
- options.paddingTop/options'padding-top'
- options.paddingRight/options'padding-right'
- options.paddingBottom/options'padding-bottom'
- options.paddingLeft/options'padding-left'
The <svg>
, <path>
and <g>
elements can be styled by any valid attributes.
The generated <svg>
has the following default attributes:
{
'version' : '1.1',
'xmlns' : 'http://www.w3.org/2000/svg',
'xmlns:xlink': 'http://www.w3.org/1999/xlink',
'role' : 'img',
'width' : width,
'height' : height,
'viewbox': [x, y, width, height].join(' ')
}
We can add/update/remove by options.svg
:
options.svg = {
'version': '', // remove this attribute
'role' : 'logo', // update this attribute
'fill' : 'red' // add some custiom styles
}
Note that the width
, height
and viewbox
can't be specified.
Styling the <path>
by options.path
. If divided
is true
we can style the individual <path>
element by options.path?
, which ?
is the index of each char in the text
:
// style for every path(s)
options.path = {
'fill': yellow
};
// style the first char
options.path0 = {
'fill': '#FF0000',
'stroke': '#000000'
};
As the same options.g
specified the style of <g>
element.
Related
- logo.svg Generate a svg logo, then you can embed it in you
README.md
.
Contributing
Pull requests and stars are highly welcome.
For bugs and feature requests, please create an issue.