scalable SVG graph with cartesian coordinate system - HTML CSS SVG

HTML CSS examples for SVG:Group

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

Description

scalable SVG graph with cartesian coordinate system

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">

.grid {stroke: black; stroke-width: 1; stroke-dasharray: 1 2}
.label{fill: black; font-size: 14px}
.data {stroke: black; stroke-width: 1}


      </style> 
 </head> <!-- w  ww .  j a  v a2s .  co m-->
 <body> 
  <svg width="100%" height="100%" viewbox="0 0 500 500"> 
   <g id="cartesian" transform="translate(0,500) scale(1,-1)"> 
    <g class="data"> 
     <line x1="0%" y1="75%" x2="50%" y2="40%"></line> 
     <line x1="50%" y1="40%" x2="100%" y2="60%"></line> 
    </g> 
    <g class="y label"> 
     <text x="0%" y="50%">
       10% 
     </text> 
     <text x="0%" y="90%">
       20% 
     </text> 
    </g> 
   </g> 
  </svg>  
 </body>
</html>

Related Tutorials