Is it possible to define the path of the textPath inline, rather than creating a def and referencing it as an xlink:href as an attribute?
  <defs>
    <path id="MyPath"
          d="M 100 200 
             C 200 100 300   0 400 100" />
  </defs>
  <use xlink:href="#MyPath"/>
  <text>
    <textPath xlink:href="#MyPath">
      My text along a path
    </textPath>
  </text>
So would it be possible to have something like
<text>
    <textPath path="M 100 200 C 200 100 300 0 400 100">
        My text along a path
    </textPath>
</text>
This does not work, but something like this?
It's a feature in the new SVG 2 specification, you'd use a path attribute.
Browsers implementation of new SVG 2 features is ongoing. The example below does work in Firefox, not sure where else though.
html, body {
  height: 100%;
  width: 100%;
}
<svg height="100%" width="100%">
  <text>
    <textPath path="M 100 200 C 200 100 300 0 400 100">
        My text along a path
    </textPath>
  </text>
</svg>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With