Wiki  |   Blog  |   Sitemap  |   Search  
Home
JavaScript UI FrameworkExamplesUI Languages (SVG, XUL..)SVG 1.1 examplestext/tspan and textPath elements

text/tspan and textPath elements

Source code

<script type="application/ample+xml"> <svg:svg xmlns:svg="http://www.w3.org/2000/svg" viewBox="0,0 400,250" xmlns:xlink="http://www.w3.org/1999/xlink" width="400px" height="250px"> <svg:defs> <svg:path id="path" d="M0,100 a100,50 0 0,0 200,0 a100,50 0 0,1 200,0 z" /> <svg:linearGradient id="linear" x1="0" x2="0" y1="1" y2="0"> <svg:stop stop-color="red" offset="0.2" /> <svg:stop stop-color="yellow" offset="0.5" /> </svg:linearGradient> </svg:defs> <svg:text> <svg:textPath xlink:href="#path" stroke="gray" stroke-width="1" fill="url(#linear)" style="font-family:Verdana;font-size:25px;font-weight:600">Long text along SVG curly path</svg:textPath> </svg:text> <svg:text y="200" style="font-family:Verdana;font-size:25px;font-weight:600" stroke="black" stroke-width="1" fill="white">SVG in Internet Explorer!</svg:text> </svg:svg> </script>