Place Labels on SVG
Output Readme Download Replit Sel. & Copy Full


This repl includes a few JavaScript functions that allow you to move the labels on SVG shapes.

To view this on TripleLog, click here.


The index.html is generated from other repls and includes SVG elements for the states of Georgia, South Carolina, and North Carolina. Each has a label centered on the centroid of the state.

Clicking the Move Label(s) button toggles between moving the labels or the shapes, but there is not currently any indication of which mode is currently active.


The script.js allows you to move the labels or the shapes. When the labels move, they stay in the same location relative to the shape regardless if that shape moves later.

You can also increase or decrease the size of all labels.

You probably want to add more functionality, but this code could get you started to easily place labels exactly where you want them.