CSS text-anchor Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">.example {
  max-width: 520px;
  margin: 20px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.desc {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 14px;
}

svg {
  width: 100%;
  height: auto;
  border: 1px solid #e6e6e6;
  background: #fff;
  box-sizing: border-box;
  display: block;
}

.guide {
  stroke: #a0a0a0;
  stroke-width: 1.5;
  stroke-dasharray: 4 2;
}

.anchor-point {
  fill: #222;
  opacity: 0.6;
}

text {
  font-size: 16px;
  dominant-baseline: middle;
}

.anchor-start {
  text-anchor: start;
  fill: #1b9e77;
}

.anchor-middle {
  text-anchor: middle;
  fill: #d95f02;
}

.anchor-end {
  text-anchor: end;
  fill: #7570b3;
}
</style></head><body><div class="example">
  <p class="desc">SVG text-anchor example  -  anchors demonstrated at the vertical guide line</p>
  <svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Text anchor demonstration">
    <line class="guide" x1="150" y1="10" x2="150" y2="190" />
    <circle class="anchor-point" cx="150" cy="50" r="3" />
    <circle class="anchor-point" cx="150" cy="100" r="3" />
    <circle class="anchor-point" cx="150" cy="150" r="3" />
    <text class="anchor-start" x="150" y="50">start</text>
    <text class="anchor-middle" x="150" y="100">middle</text>
    <text class="anchor-end" x="150" y="150">end</text>
  </svg>
</div></body></html>