Rotate and Render Text with HTML5 SVG - HTML CSS SVG

HTML CSS examples for SVG:Text

  1. HOME
  2. HTML CSS
  3. SVG
  4. Text

Description

Rotate and Render Text with HTML5 SVG

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8"> 
  <title>Rotate and Render Text with HTML5 SVG</title> 
  <style type="text/css">
    svg {<!--   w w w  .ja  v  a2  s  .c  om-->
        border: 1px solid black;
    }
</style> 
 </head> 
 <body> 
  <svg width="300" height="200"> 
   <text x="30" y="15" style="fill:purple; font-size:22px; transform:rotate(30deg);"> 
    <tspan style="fill:purple; font-size:22px;">
      Welcome to Our Website! 
    </tspan> 
    <tspan dx="-230" dy="20" style="fill:navy; font-size:14px;">
      this is a test.
    </tspan> 
   </text> 
  </svg>   
 </body>
</html>

Related Tutorials