<?xml version="1.0" encoding="utf-8"?>
<svg width="400" height="300" viewBox="0 0 400 300"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:html="http://www.w3.org/1999/xhtml">
  <metadata>
    <html:link rel="author" title="Tavmjong Bah" href="mailto:tavmjong@free.fr"/>
    <html:link rel="author" title="Virali Purbey" href="mailto:viralipurbey@microsoft.com"/>
    <html:link rel="help" href="https://w3c.github.io/svgwg/svg2-draft/text.html#TextPathElementSideAttribute"/>
    <html:link rel="help" href="https://github.com/w3c/svgwg/issues/1068"/>
    <html:link rel="match" href="textpath-side-001-ref.svg"/>
    <html:meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-100"/>
  </metadata>
  <html:link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/>
  <style>
    text { font-family: Ahem; font-size: 16px; }
  </style>
  <defs>
    <path id="path" d="M 50,80 Q 200,20 350,80"/>
  </defs>
  <!-- Row 1: no side attribute (default) -->
  <g transform="translate(0,0)">
    <use href="#path" style="fill:none;stroke:lightblue"/>
    <text>
      <textPath href="#path">ABCD</textPath>
    </text>
  </g>
  <!-- Row 2: side="left" (should match default) -->
  <g transform="translate(0,80)">
    <use href="#path" style="fill:none;stroke:lightblue"/>
    <text>
      <textPath href="#path" side="left">ABCD</textPath>
    </text>
  </g>
  <!-- Row 3: side="right" (text on opposite side of curve) -->
  <g transform="translate(0,160)">
    <use href="#path" style="fill:none;stroke:lightblue"/>
    <text>
      <textPath href="#path" side="right">ABCD</textPath>
    </text>
  </g>
</svg>