#!/usr/bin/perl -w

BEGIN {
  push @INC , '../';  
  push @INC , '../SVG';
}

use strict;
use SVG;
my $svg  = SVG->new(width=>"100%", height=>"100%", onload=>"init(evt)");

Use the CDATA (not cdata -- case sensitive) method to define the script to be embedded into the SVG code. CDATA generates a tag with the contents of the text string passed to it and rendered exactly as supplied. SVG.pm allows you to set cdata for any tag.

Caution about CDATA: If the tag is meant to be an empty tag, SVG.pm will not complain, but the rendering agent will fail. In the SVG DTD, cdata is generally only meant for adding text or script content.

Note: Method cdata url-escapes all characters taht are toxic to XML such as & and ? characters

$svg->script()->CDATA(qq§
        var SVGDoc;
        var groups = new Array();
        var last_group;
        
        /*****
        *
        *   init
        *
        *   Find this SVG's document element
        *   Define members of each group by id
        *
        *****/
        function init(e) {
            SVGDoc = e.getTarget().getOwnerDocument();
            append_group(§.int(rand(6)).','.int(rand(6)).','.int(rand(6)).qq§); // group 0
            append_group(§.int(rand(6)).','.int(rand(6)).','.int(rand(6)).qq§); // group 1
            append_group(§.int(rand(6)).','.int(rand(6)).qq§); // group 2
            append_group(§.int(rand(6)).qq§); // group 3
        }
        /*****
        *
        *   append_group
        *
        *   Build an array of elements and append to
        *   group array
        *
        *****/
        function append_group() {
            var roads = new Array();
            for (var i = 0; i < arguments.length; i++) {
                var index = arguments[i];
                var road  = SVGDoc.getElementById("road" + index);
                roads[roads.length] = road;
            }
            groups[groups.length] = roads;
        }
        /*****
        *
        *   set_group_color
        *
        *   Set last group elements to default color
        *   Set all elements in new group to specified color
        *
        *****/
        function set_group_color(group_index, color) {
            if ( last_group != null ) {
                _set_group_color(last_group, "black");
            }
            _set_group_color(group_index, color);
            last_group = group_index;
        }
        
        /*****
        *
        *   _set_group_color
        *
        *   Loop through all elements in group and set
        *   stroke to specified color.
        *   Each element in the group is brought to the
        *   top of the drawing order to clean up
        *   intersections
        *
        *****/
        function _set_group_color(group_index, color) {
            var roads = groups[group_index];
            for (var i = 0; i < roads.length; i++) {
                var road = roads[i];
                
                road.setAttribute("stroke", color);
                road.getParentNode.appendChild(road);
            }
        }
        §);

my $g1 = $svg->group(stroke=>"black", 'stroke-width'=>"4pt", 'stroke-linecap'=>"square");

my $items = int(rand(3))+6;

foreach my $id (0..$items) {
  my @x = (int(rand(200)));
  my @y = (int(rand(200)));
  foreach my $i (0..int(rand(5))) {
    my $xi = int(rand(400));
    my $yi = int(rand(400));
    push @x,$xi;
    push @y,$yi;
  }
  my $path = $svg->get_path(-type=>'polyline',x=>\@x,y=>\@y);
  $g1->polyline(id=>'road'.$id,%$path,'fill-opacity'=>'0');
}
my $ty = 10;
foreach my $i (0..3) {
  my $j = $i+1;
  my $color = 'rgb('.int(rand(255)).','.int(rand(250)).','.int(rand(255)).')';
  my $g = $svg->group(onmousedown=>"set_group_color($i, '$color')");
  $g->circle(cx=>"400", cy=>$ty, r=>"5", fill=>"$color");
  $g->text( x=>"410", y=>$ty+4 )->cdata("Group $j");
  $ty += 15;
}

print "Content-Type: image/svg+xml\n\n";

print $svg->xmlify;

Here is what this program returns:

Content-Type: image/svg+xml

Click here for the source code, and Click here to see the result.

Previous Tutorial | Tutorial Home | Next Tutorial SVG Home

Take part in the Annual Global SVG Conference! SVG Open 2005.

August 15-18, Enschede, the Netherlands

At the SVG Open 2005 Conference you will have the opportunity to learn about the SVG standard, how to use it to create effective and compelling Web content, techniques for developing SVG software solutions, and the latest developments from the W3C. You will meet the authors of the SVG specifications and the creators of SVG applications in person, and you will have the opportunity to provide your own input for future development.

You will get a chance to see the newest SVG applications and tools, and you will hear early announcements of upcoming SVG product releases. SVG Open 2005 courses will enlighten you on SVG, XML and related standards, graphic design and Web application design. Courses will be available at both introductory and advanced levels, in order to serve the needs of all conference attendees.

Click on the image below to proceed to the SVG Open website