HTML5 − SVG Line

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

<!DOCTYPE html>

            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);

      <meta charset="utf-8" />

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

      <svg id="svgelem" height="200" xmlns="">
         <line x1="0" y1="0" x2="200" y2="100" style="stroke:red;stroke-width:2"/>

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.



One comment

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s