Skip to content

A small utility to correct the alignment of radially positioned SVG text elements.

License

Notifications You must be signed in to change notification settings

JuniperChicago/ticktext

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

WIP

A small utility to correct the alignment of radially positioned SVG text elements.

Purpose

When placed radially, like on a gauge or dial, SVG text elements can look awful unless their positions are corrected for the eye.

In the following illustration, the red elements show text placement on the basis of polar to cartesian coordinates. The green elements illustrate the correction made by the ticktext function.

SVG Text Alignment and Correction

Installation

npm install --save ticktext

Usage

import ticktext from 'ticktext';


const originalCoordinate = {x: 100, y: 100};
const angle = 90; // degrees
const text = '000'
const fontSize = 12;
const inside = true;


const newCoordinate = ticktext(originalCoordinate, angle, text, fontSize, inside);

About

A small utility to correct the alignment of radially positioned SVG text elements.

Resources

License

Stars

Watchers

Forks

Packages

No packages published