CODEWITHSUNDEEP
javascripthtmlcsssvg
user4815162342
user4815162342

Reputation: 1688

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?

Upvotes: 7

Views: 873

Answers (1)

Robert Longson
Robert Longson

Reputation: 124089

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>

Upvotes: 4

Related Questions