Never been to DZone Snippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

About this user

James Robertson http://www.r0bertson.co.uk

« Newer Snippets
Older Snippets »
Showing 1-1 of 1 total  RSS 

Draw a series of lines using SVG

This code draws a line every time the user presses the mouse button. Here is an example of the SVG output [twitxr.com].

Tested in Firefox 3 beta 4.
<?xml version="1.0" encoding="UTF-8"?> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
 onclick="addPoint(evt, document.getElementById('pl1'));"> 
  <title>click to add point to polyline</title>
  <script type="text/ecmascript">
    <![CDATA[ 
      function addPoint (evt, element) {
        var point = element.ownerDocument.documentElement.createSVGPoint(); 
        point.x = evt.clientX; 
        point.y = evt.clientY; 
        element.points.appendItem(point);
      }
    ]]>
  </script> 
  <rect x="0" y="0" width="100%" height="100%" fill-opacity="0" />
  <polyline id="pl1" fill="none" stroke="green" stroke-width="2" points="30,180 50,150" />
</svg>
to svg polyline onclick create ecmascript mousedown by jrobertson on Mar 22, 2008
« Newer Snippets
Older Snippets »
Showing 1-1 of 1 total  RSS