The need frequently arises in graphics to place an element inside a container. To solve this problem the terms anchorage and anchor are jointly defined as follows.
These terms are defined so that a graphics element is positioned inside a graphics container by binding the graphics element anchor to a graphics container anchorage. This means that an anchor and its anchorage are visually at the same position.
The anchor for a SVG <text> element is determined by its
text-anchor and dominant-baseline attributes.
text-anchor attribute determines the horizontal
position of the anchor relative to the text, and
dominant-baseline attribute determines the vertical
position of the anchor relative to the text.
Both of these attributes can be set either with JavaScript code or with CSS styles.
The following diagrams illustrate the different possible values for these attributes. The diagrams use the FreeSans font. The red dots indicate anchors/anchorages.
The FreeSans font was selected for uniformity of results across platforms. It was checked with both Chromium and FireFox browsers on Linux Mint 17.3 Rosa and Ubuntu 18.04.1. Even using the same font, there are differences in placement depending on both the operating system and the browser.