<svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1"> <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> <desc>Example toap02 - tspan within textPath</desc> <use xlink:href="#MyPath" fill="none" stroke="red"/> <text font-family="Verdana" font-size="42.5" fill="blue"> <textPath xlink:href="#MyPath"> We go <tspan dy="-30" fill="red"> up </tspan> <tspan dy="30"> , </tspan> then we go down, then up again </textPath> </text> <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2"/> </svg> |
Original SVG source |