created: 20140324223413403 fr-title: Tracer un texte incurvé avec SVG modified: 20150622054404265 tags: Learning title: Making curved text with SVG type: text/vnd.tiddlywiki \define textOnPath(text) $$$.svg <svg width="100%" height="100%" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <path id="MyPath" d="M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100"/> </defs> <use xlink:href="#MyPath" fill="none" stroke="#ddd"/> <text font-family="'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif" font-size="42.5"> <textPath xlink:href="#MyPath"> $text$ </textPath> </text> </svg> $$$ \end Cette démonstration montre comment utiliser SVG pour faire suivre un chemin incurvé à un texte transclu. Entrez du texte dans la zone çi-dessous pour essayer<<;>> visualiser le code source pour voir examiner le fonctionnement. <$edit-text tiddler="$:/CurvedText" tag="input" placeholder="Type text here" default=""/> <$macrocall $name="textOnPath" text={{$:/CurvedText}}/>