make curve style menu in SVG - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Menu

Description

make curve style menu in SVG

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
body {<!--from w ww . ja  v  a 2s .c om-->
   font-family:verdana;
}
</style> 
 </head> 
 <body> 
  <svg viewbox="0 0 500 300" version="1.1"> 
   <defs> 
    <!-- Start at (10,40) end at (490,40) use control point (250 ,85) --> 
    <path id="curvetext" d="M 10,40 Q 250,85 490,40" /> 
   </defs> 
   <use x="0" y="0" xlink:href="#curvetext" fill="none" stroke="gray" stroke-width="50" /> 
   <text font-size="12" fill="white"> 
    <textpath xlink:href="#curvetext"> 
     <a xlink:href="http://example.com">Lorem </a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    </textpath> 
   </text> 
  </svg>  
 </body>
</html>

Related Tutorials