This example shows how you can set and get the properties of an SVGTextPathElement.
HTML
First we define the SVG and associated CSS to draw a path with text drawn along it (this is a near-copy of the SVG in the path attribute topic).
html,
body,
svg {
height: 400px;
width: auto; /* Keeps the aspect ratio */
}
html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- to hide the path, it is usually wrapped in a <defs> element -->
<!-- <defs> -->
<path
id="MyPath"
fill="none"
stroke="red"
d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
<text>
<textPath href="#MyPath">Quick brown fox jumps over the lazy dog.</textPath>
</text>
</svg>
We also add a button for toggling the side property in order to change what side of the path the text is drawn on.
Note that there is also hidden logging code that is not relevant to the example.
html
<button id="toggleBtn">Toggle side</button>
#log {
height: 120px;
overflow: scroll;
padding: 0.5rem;
border: 1px solid black;
}
const logElement = document.querySelector("#log");
function log(text) {
logElement.innerText = `${logElement.innerText}${text}\n`;
logElement.scrollTop = logElement.scrollHeight;
}
JavaScript
The code below toggles the side.baseVal property on the textPath, causing the text to swap sides.
First we define a function to log each of the properties of the path element, and call it to log the initial state on load.
The side.baseVale property is logged first, and demonstrates how the enumerated constants may be read and interpreted (this is done in a try...catch block, because side is not supported in all browsers).
The other properties of the text path are also logged, but as raw values of their associated baseVal property.
js
const textPath = document.querySelector("textPath");
function logPathBaseVal() {
// Log the baseVal for each property
log("LOG:");
try {
let side;
if (textPath.side.baseVal === SVGTextPathElement.TEXTPATH_SIDETYPE_RIGHT) {
side = "right";
} else if (
textPath.side.baseVal === SVGTextPathElement.TEXTPATH_SIDETYPE_LEFT
) {
side = "left";
} else if (
textPath.side.baseVal === SVGTextPathElement.TEXTPATH_SIDETYPE_UNKNOWN
) {
side = "unknown";
} else {
side = "unexpected value";
}
log(` Current side: ${side}`);
} catch {
log(`side property is not supported in this browser`);
}
log(` href: ${textPath.href.baseVal}`);
log(` method: ${textPath.method.baseVal}`);
log(` spacing: ${textPath.spacing.baseVal}`);
log(` startOffset: ${textPath.startOffset.baseVal}`);
}
// Log the initial state on load
logPathBaseVal();
The toggle button event handler code is shown below This reads the current value of the side.baseVal property, and toggles the value to match the other side.
It then logs the current state.
js
// Toggle the side when the button is clicked
toggleBtn.addEventListener("click", () => {
try {
if (textPath.side.baseVal === SVGTextPathElement.TEXTPATH_SIDETYPE_RIGHT) {
// Change to left
textPath.side.baseVal = SVGTextPathElement.TEXTPATH_SIDETYPE_LEFT;
} else {
// Change to right
textPath.side.baseVal = SVGTextPathElement.TEXTPATH_SIDETYPE_RIGHT;
}
// Log the updated state
logPathBaseVal();
} catch (e) {
log("Setting the side property is not supported in this browser.");
}
});
Result
Press the button to toggle the states.