text following circular path
See original GitHub issueHello! 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>
![Screenshot 2020-09-21 at 10 49 52 PM](https://user-images.githubusercontent.com/8202674/93782176-d4774b00-fc5c-11ea-863f-60d422bfb382.png)
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!
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (4 by maintainers)
Top Results From Across the Web
How To Type In a Circle In Photoshop - Text In a Circular ...
Type on a Circular Path. On the Toolbar, select the Text tool. On the Options bar, On the Options bar, click on the...
Read more >How To Type Text In A Circle In Photoshop (Step By Step)
To type text in a circle in Photoshop, select the Ellipse Tool then click and drag out on your canvas to create a...
Read more >Curve text around a circle or other shape
Wrap around a circle To create text that completely circles your shape, choose Circle under Follow Path, and then drag any of the...
Read more >Tip: Wrapping text around a circle in After Effects - Angie Taylor
3) Open the Layer in the Timeline by clicking it's disclosure triangle and then open the 'Text' section too. 4) Open the 'Path...
Read more >How To Wrap Text Around A Circle In GIMP {Fix Upside ...
Make sure your “Top” path layer is selected. Next, navigate back to your layers panel. In the layer window, click the text layer...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@cduck Upgrade fixed it. Thanks!
The
textPath
element has not been implemented yet. You can subclassDrawingBasicElement
orDrawingParentElement
yourself to make any SVG tag (and maybe make a pull request).This should get you started: