HTML CSS examples for SVG:Text
SVG text alignment with a curved text path
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> svg {<!--from w ww. java2 s . c o m--> font-size: 25px; font-face: Arial; text-rendering: geometricPrecision; /* You can use the following options: text-rendering: auto; text-rendering: optimizeSpeed; text-rendering: optimizeLegibility; text-rendering: geometricPrecision; */ } </style> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="menu_path" d="M 80,40 Q 200,85 245,205" stroke="none" fill="none" /> <text font-family="serif"> <textpath xlink:href="#menu_path"> News Info Presse Musik </textpath> </text> <text transform="translate(0,50)" font-family="sans-serif"> <textpath xlink:href="#menu_path"> News Info Presse Musik </textpath> </text> <text transform="translate(0,100)" font-family="monotype"> <textpath xlink:href="#menu_path"> News Info Presse Musik </textpath> </text> <text transform="translate(0,150)" font-family="cursive"> <textpath xlink:href="#menu_path"> News Info Presse Musik </textpath> </text> <text transform="translate(0,200)" font-family="fantasy"> <textpath xlink:href="#menu_path"> News Info Presse Musik </textpath> </text> </svg> </body> </html>