svg-text-in-shape
v1.0.2
Published
A simple tool for wrapping text in an svg shape
Downloads
4
Readme
text-in-shape
A simple tool that wraps text inside an svg shape
Use when you:
- Need to wrap text inside a complex shape.
- You can supply a basic SVG shape for the text wrapper
- You do not need overflow scrolling text
Supported shapes
- Rectangle
- Polygon
- Circle
Usage
npm install text-in-shapeBasic usage
import wrap from 'text-in-shape';
const elem = document.getElementById('my-svg-shape');
wrap(text, elem, {
align: 'center',
padding: 20,
style: {
fontSize: '2em'
}
})
DEMO
--> demo <--B
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>text-in-shape - simple tool to wrap text in a shape</title>
</head>
<body>
<div id="root">
<svg id="svg_master" viewBox="0 0 1400 1500">
<polygon id="polygon" fill="#FFFCD7" stroke="black" stroke-width="4px" points="299.7,0 599.4,217.7 484.9,570 114.5,570 0,217.7 " />
<rect id="rect" x="50" y="700" width="600" height="600" fill="#FFFCD7" stroke="black" stroke-width="4px" />
<circle id="circle" cx="1000" cy="320" r="300" fill="#FFFCD7" stroke="black" stroke-width="4px" />
</svg>
</div>
<script src="./build/index.js"></script>
</body>
</html>
import { textInShape } from 'text-in-shape';
const text = `Lorem ipsum dolor sit amet, nec ut dolorum hendrerit.
Ad novum nostro eum, mei no option voluptaria.
Senserit referrentur ullamcorper et sed, per semper timeam feugait id.
In mea alia meliore, wisi justo his ne. Te essent eripuit appellantur eos. In intellegebat deterruisset vis, at albucius intellegebat sea, ad usu erat impedit.
At homero soleat vocibus vim, causae referrentur comprehensam te mea. Ei duo fastidii complectitur, duo legendos euripidis no. Ea habeo invidunt vel. Et omnis probatus senserit eos, accumsan adipisci eum ut. Eu vel mandamus definitiones, usu no probo tempor, vel ad ignota imperdiet reprimique.`
const ids = ['polygon', 'circle', 'rect'];
ids.forEach((id) => {
const elem = document.getElementById(id)
textInShape(text, elem, {
align: 'center',
paddingBottom: 10,
style: {
fontSize: '40px'
}
})
})
API
arguments: ( text: String, elem: SVGRectElement || SVGCircleElement || SVGPolygonElement, options: object )
options:
| Property | Type | Accepted Values | Default | Description | | ------------- | -------- | -------------- | -------- | --------------------------------------------------- | | align | String | 'left', 'right', 'center' | 'center' | Align the text to a given side or centrally | | padding | Number | float or integer | 0 | Provides an inner padding | | paddingTop | Number | float or integer | 0 | | | paddingBottom | Number | float or integer | 0 | | | paddingLeft | Number | float or integer | 0 | | | paddingRight | Number | float or integer | 0 | | | justifyText | Boolean | - | false | Stretches text to fit the line width using letter-spacing | | hideShape | Boolean | - | false | Hide the passed SVGElement | | style | Object | css key value pairs (camelCased) | {} | Apply standard css styling to the rendered text elements |