text following circular path

[marekyggdrasil]

Hello!
I was wondering if it is possible to recreate effect like on following example? Of text following a curved path.

<svg xmlns="http://www.w3.org/2000/svg"
     width="300" height="100" viewBox="0 0 300 100">

  <path id="MyPath" stroke="lightblue" fill="none"
	d="M 50,50 C 100,0 200,100 250,50"/>

  <text style="font: 24px sans-serif;">
    <textPath href="#MyPath">Text on a path.</textPath>
  </text>

</svg>

reference: https://www.w3.org/TR/SVG/text.html

more examples:
http://thenewcode.com/482/Placing-Text-on-a-Circle-with-SVG
https://css-tricks.com/snippets/svg/curved-text-along-path/
https://codepen.io/rdfriedl/pen/rOegaP

Thanks a lot for hints!

[cduck]

The textPath element has not been implemented yet. You can subclass DrawingBasicElement or DrawingParentElement yourself to make any SVG tag (and maybe make a pull request).

This should get you started:

import drawSvg as draw
import xml.sax.saxutils as xml

class _TextPathNode(draw.DrawingBasicElement):
    TAG_NAME = 'textPath'
    hasContent = True
    def __init__(self, text, path, **kwargs):
        super().__init__(xlink__href=path, **kwargs)
        self.escapedText = xml.escape(text)
    def writeContent(self, idGen, isDuplicate, outputFile, dryRun):
        if dryRun: return
        outputFile.write(self.escapedText)

class TextOnPath(draw.DrawingParentElement):
    TAG_NAME = 'text'
    def __init__(self, text, fontSize, path, **kwargs):
        super().__init__(font_size=fontSize, **kwargs)
        self.append(_TextPathNode(text, path))


d = draw.Drawing(300, 100, origin=(0, 0), displayInline=False)

path = draw.Path(stroke='lightblue', fill='none')
path.M(50, 100-50).C(100, 100-0, 200, 100-100, 250, 100-50)
d.append(path)

text = TextOnPath('Text on a path.', 24, path)
d.append(text)

d

[marekyggdrasil]

Thanks for a starter! I'll be happy to contribute!

[lthumbe]

The textPath element has not been implemented yet. You can subclass DrawingBasicElement or DrawingParentElement yourself to make any SVG tag (and maybe make a pull request).

Does this apply to the 'basic drawing elements' example? I can't get path text or multi-line text working (lines 32-33). The error states required positional arguments 'x' and 'y' are missing.

[cduck]

@lthumbe You probably have an old version of drawSvg. The pull request linked right above this added the feature for the version 1.8.1 which was recently published (and I forgot to close this issue). From your terminal run pip show drawSvg to check the version. To update, run pip install --upgrade drawSvg.

Let me know if this works then I'll close this issue.

[lthumbe]

@cduck Upgrade fixed it. Thanks!

[cduck]

Closing because text following a path was implemented by #22.