HTML CSS examples for SVG:Text
use text path in SVG
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body, html { height: 100%; font-family: Verdana; margin: 0; } .container {<!--from w ww.j av a 2 s .com--> display: flex; flex-direction: column; height: 100%; } .flex-row { display: flex; width: 100%; flex: 1; } .flex-row svg { flex: 1 0 0px; overflow: hidden; } text { fill: blue; font-family: "Verdana"; font-size: 40px; } rect { fill: transparent; stroke: #999; stroke-width: 3px; } circle { fill: violet; } .hover { width: 200px; font-size: 30px; padding: 20px; background: white; color: #555; float: left; display: inline-block; } .hover span { opacity: 0; color: blue; } .hover:hover span { opacity: 1; } </style> </head> <body> <div class="container"> <div class="flex-row"> <svg id="blue" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1000 300"> <defs> <path d="M30,100,300,100,400,200,1000,200" id="textpath"></path> </defs> <text x="30" y="40"> Normal Text </text> <text> <textpath xlink:href="#textpath"> this is a test. this is a test. </textpath> </text> <rect x="0" y="0" width="1000" height="300"></rect> <circle cx="200" cy="200" r="70"></circle> </svg> </div> <div class="hover"> HOVER <span>NICE</span> </div> </div> </body> </html>