Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SVG textPath without xlink

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?

like image 200
user4815162342 Avatar asked Jun 04 '15 21:06

user4815162342


1 Answers

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>
like image 194
Robert Longson Avatar answered Sep 28 '22 06:09

Robert Longson