hgupta / svg-text-wrap

SVG Text Wrapping of long labels inside SVG circles like Neo4j

SVG Text Wrap like Neo4j

SVG Text Wrapping of long labels inside SVG figures like Neo4j. Currently only for circles.

Codepen Demo

An example is also added to the project.

• Clone the repository
• npm install or yarn.
• Run the server. npm run serve or yarn serve
• Open localhost:8080/example/ in browser

Usage

window.SVGTextWrap('long label to be wrapped'[, settings])

Settings

• splitter - text splitting method, default: splits by space
• radius - radius of circle, default: 40
• fontName - default: sans-serif
• fontSize - in pixels (px), default: 10
• lineHeight - default, 12

Returns

Array of objects:

• rule - y value inside circle's xy space
• remainingWidth - width of rule remaining after text added to the rule
• text - part of original label that can be fit into the rule

You can add more labels to test by modifying the labels.js file in the example directory.

TODO

• Support rectangles / squares
• Support triangles