HTML5 − SVG Line


Following is the HTML5 version of an SVG example which would draw a line using <line> tag

<!DOCTYPE html>
<html>
   <head>

<style>
         #svgelem{
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>

      <title>SVG</title>
      <meta charset="utf-8" />
   </hea>
   <body>

<h2 align="center">HTML5 SVG Line</h2>

      <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
         <line x1="0" y1="0" x2="200" y2="100" style="stroke:red;stroke-width:2"/>
      </svg>
   </body>
</html>

You can use style attribute which allows you to set additional style information like stroke and fill colors, width of the stroke etc.

This would produce following result in HTML5 enabled latest version of Firefox.

svgline

Advertisements

One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s