About

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

To view this on TripleLog, click here.

HTML

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.

JavaScript

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.