SVG::Element - Generate the element bits for SVG.pm
Ronan Oger, ronan@roasp.com
perl(1),L<SVG>,L<SVG::XML>,L<SVG::Element>,L<SVG::Parser>, L<SVG::Manual>
http://www.roitsystems.com/
http://www.w3c.org/Graphics/SVG/
use vars
qw($AUTOLOAD %autosubs);
animateMotion animateColor animateTransform circle ellipse rect polyline
path polygon line title desc defs
altGlyph altGlyphDef altGlyphItem clipPath color-profile
cursor definition-src font-face-format font-face-name
font-face-src font-face-url foreignObject glyph
glyphRef hkern marker mask metadata missing-glyph
mpath switch symbol textPath tref tspan view vkern marker textbox
%autosubs=map { $_ => 1 } @autosubs;
#-------------------------------------------------------------------------------
my ($proto,$name,%attrs)=@_;
my $class=ref($proto) || $proto;
my $self={-name
=> $name};
foreach my $key (keys %attrs) {
$self->{$key}=$attrs{$key};
return bless($self,$class);
#-------------------------------------------------------------------------------
foreach my $key (keys(%{$self})) {
if (ref($self->{$key})=~/^SVG/) {
eval { $self->{$key}->release; };
my $ns = $self->{-namespace
} || $self->{-docref
}->{-namespace
} || undef;
foreach my $k (keys(%{$self})) {
if(ref($self->{$k}) eq 'ARRAY') {
$attrs{$k}=join(', ',@
{$self->{$k}});
} elsif(ref($self->{$k}) eq 'HASH') {
$attrs{$k}=cssstyle
(%{$self->{$k}});
} elsif(ref($self->{$k}) eq '') {
$xml .= $self->xmlcomment($self->{-comment
});
$xml .= $self->xmlpi($self->{-pi
});
} elsif ($self->{-name
} eq 'document') {
#and write the dtd if this is inline
$xml .= $self->dtddecl unless $self->{-inline
};
foreach my $k (@
{$self->{-childs
}}) {
if(ref($k)=~/^SVG::Element/) {
if(defined $self->{-childs
} ||
defined $self->{-cdata
} ||
defined $self->{-CDATA
} ||
defined $self->{-cdata_noxmlesc
}) {
$xml .= $self->{-docref
}->{-elsep
};
$xml .= $self->{-docref
}->{-indent
} x
$self->{-docref
}->{-level
};
$xml .= xmltagopen_ln
($self->{-name
},$ns,%attrs);
$self->{-docref
}->{-level
}++;
foreach my $k (@
{$self->{-childs
}}) {
if(ref($k)=~/^SVG::Element/) {
if(defined $self->{-cdata
}) {
$xml .= xmlescp
($self->{-cdata
});
if(defined $self->{-CDATA
}) {
$xml .= '<![CDATA['.$self->{-CDATA
}.']]>';
if(defined $self->{-cdata_noxmlesc
}) {
$xml .= $self->{-cdata_noxmlesc
};
#return without writing the tag out if it the document tag
$self->{-docref
}->{-level
}--;
$xml .= $self->{-docref
}->{-elsep
};
$xml .= $self->{-docref
}->{-indent
} x
$self->{-docref
}->{-level
};
$xml .= xmltagclose_ln
($self->{-name
},$ns);
$xml .= $self->{-docref
}->{-elsep
};
$xml .= $self->{-docref
}->{-indent
} x
$self->{-docref
}->{-level
};
$xml .= xmltag_ln
($self->{-name
},$ns,%attrs);
foreach my $k (keys(%{$self})) {
if(ref($self->{$k}) eq 'ARRAY') {
$attrs{$k}=join(', ',@
{$self->{$k}});
} elsif(ref($self->{$k}) eq 'HASH') {
$attrs{$k}=cssstyle
(%{$self->{$k}});
} elsif(ref($self->{$k}) eq '') {
$code .= "->comment($self->{-comment})";
$code .= "->pi($self->{-pi})";
} elsif ($self->{-name
} eq 'document') {
#and write the dtd if this is inline
#$xml .= $self->dtddecl unless $self->{-inline};
foreach my $k (@
{$self->{-childs
}}) {
if(ref($k)=~/^SVG::Element/) {
if (defined $self->{-childs
}) {
$code .= $self->{-docref
}->{-elsep
};
$code .= $self->{-docref
}->{-indent
} x
$self->{-docref
}->{-level
};
$code .= $self->{-name
}.'('.(join ', ',(map { "$_=>'$attrs{$_}'"} sort keys %attrs)).')';
$code.="->cdata($self->{-cdata})";
} elsif ($self->{-CDATA
}) {
$code.="->CDATA($self->{-CDATA})";
} elsif ($self->{-cdata_noxmlesc
}) {
$code.="->cdata_noxmlesc($self->{-cdata_noxmlesc})";
$self->{-docref
}->{-level
}++;
foreach my $k (@
{$self->{-childs
}}) {
if(ref($k)=~/^SVG::Element/) {
$self->{-docref
}->{-level
}--;
$code .= $self->{-docref
}->{-elsep
};
$code .= $self->{-docref
}->{-indent
} x
$self->{-docref
}->{-level
};
$code .= $self->{-name
}.'('.(join ', ',(map { "$_=>'$attrs{$_}'"} sort keys %attrs)).')';
push @
{$self->{-childs
}},@_;
=head2 tag (alias: element)
$tag = $SVG->tag($name, %attributes)
Generic element generator. Creates the element named $name with the attributes
specified in %attributes. This method is the basis of most of the explicit
my $tag = $SVG->tag('g', transform=>'rotate(-45)');
my ($self,$name,%attrs)=@_;
unless ($self->{-parent
}) {
#traverse down the tree until you find a non-document entry
while ($self->{-document
}) {$self = $self->{-document
}}
my $tag=new SVG
::Element
($name,%attrs);
#define the element namespace
$tag->{-namespace
}=$attrs{-namespace
} if ($attrs{-namespace
});
#add the tag to the document element
$tag->{-docref
} = $self->{-docref
};
#create the empty idlist hash ref unless it already exists
$tag->{-docref
}->{-idlist
} = {}
unless (defined $tag->{-docref
}->{-idlist
});
#verify that the current id is unique. compain on exception
#>>>TBD: add -strictids option to disable this check if desired
if ($self->getElementByID($tag->{id
})) {
$self->error($tag->{id
} => "ID already exists in document");
#add the current id reference to the document id hash
$tag->{-docref
}->{-idlist
}->{$tag->{id
}} = $tag if defined ($tag->{id
});
#create the empty idlist hash ref unless it already exists
$tag->{-docref
}->{-elist
} = {}
unless (defined $tag->{-docref
}->{-elist
});
#create the empty idlist hash ref unless it already exists
$tag->{-docref
}->{-elist
}->{$tag->{-name
}} = []
unless (defined $tag->{-docref
}->{-elist
}->{$tag->{-name
}});
#add the current element ref to the corresponding element-hash array
# -elist is a hash of element names. key name is element, content is object ref.
# add the reference to $tag to the array of refs that belong to the
unshift @
{$tag->{-docref
}->{-elist
}->{$tag->{-name
}}},$tag;
# attach element to the DOM of the document
$tag->{-parentname
}=$self->{-name
};
$tag = $SVG->anchor(%attributes)
Generate an anchor element. Anchors are put around objects to make them
'live' (i.e. clickable). It therefore requires a drawn object or group element
-href=>'http://here.com/some/simpler/SVG.SVG'
# add a circle to the anchor. The circle can be clicked on.
$tag->circle(cx=>10,cy=>10,r=>1);
# more complex anchor with both URL and target
-href => 'http://somewhere.org/some/other/page.html',
my $an=$self->tag('a',%attrs);
$an->{'xlink:href'}=$attrs{-href
} if(defined $attrs{-href
});
$an->{'target'}=$attrs{-target
} if(defined $attrs{-target
});
my $svg=$self->tag('svg',%attrs);
$svg->{'height'} = '100%' unless ($svg->{'height'});
$svg->{'width'} = '100%' unless ($svg->{'width'});
$tag = $SVG->circle(%attributes)
Draw a circle at (cx,cy) with radius r.
my $tag = $SVG->circlecx=>4, cy=>2, r=>1);
$tag = $SVG->ellipse(%attributes)
Draw an ellipse at (cx,cy) with radii rx,ry.
=head2 rectangle (alias: rect)
$tag = $SVG->rectangle(%attributes)
Draw a rectangle at (x,y) with width 'width' and height 'height' and side radii
return $self->tag('rect',%attrs);
$tag = $SVG->image(%attributes)
Draw an image at (x,y) with width 'width' and height 'height' linked to image
resource '-href'. See also L<"use">.
'-href'=>"image.png", #may also embed SVG, e.g. "image.SVG"
<image xlink:href="image.png" x="100" y="100" width="300" height="200"/>
my $im=$self->tag('image',%attrs);
$im->{'xlink:href'}=$attrs{-href
} if(defined $attrs{-href
});
$tag = $SVG->use(%attributes)
Retrieve the content from an entity within an SVG document and apply it at
(x,y) with width 'width' and height 'height' linked to image resource '-href'.
'-href'=>"pic.SVG#image_1",
<use xlink:href="pic.SVG#image_1" x="100" y="100" width="300" height="200"/>
According to the SVG specification, the 'use' element in SVG can point to a
single element within an external SVG file.
my $u=$self->tag('use',%attrs);
$u->{'xlink:href'}=$attrs{-href
} if(defined $attrs{-href
});
$tag = $SVG->polygon(%attributes)
Draw an n-sided polygon with vertices at points defined by a string of the form
'x1,y1,x2,y2,x3,y3,... xy,yn'. The L<"get_path"> method is provided as a
convenience to generate a suitable string from coordinate data.
L<"polyline">, L<"path">, L<"get_path">.
$tag = $SVG->polyline(%attributes)
Draw an n-point polyline with points defined by a string of the form
'x1,y1,x2,y2,x3,y3,... xy,yn'. The L<"get_path"> method is provided as a
convenience to generate a suitable string from coordinate data.
# a 10-pointsaw-tooth pattern
my $xv = [0,1,2,3,4,5,6,7,8,9];
my $yv = [0,1,0,1,0,1,0,1,0,1];
-closed=>'true' #specify that the polyline is closed.
'stroke-color'=>'rgb(250,123,23)'
$tag = $SVG->line(%attributes)
Draw a straight line between two points (x1,y1) and (x2,y2).
To draw multiple connected lines, use L<"polyline">.
$text = $SVG->text(%attributes)->cdata();
$text_path = $SVG->text(-type=>'path');
$text_span = $text_path->text(-type=>'span')->cdata('A');
$text_span = $text_path->text(-type=>'span')->cdata('B');
$text_span = $text_path->text(-type=>'span')->cdata('C');
define the container for a text string to be drawn in the image.
-type = path type (path | polyline | polygon)
-type = text element type (path | span | normal [default])
)->cdata('hello, world');
id=>'l1', x=>10, y=>10, -cdata=>'hello, world');
id=>'tp', x=>10, y=>10 -type=>path)
->text(id=>'ts' -type=>'span')
$pre = $attrs{-type
} || 'std';
my %get_pre = (std
=>'text',
$pre = $get_pre{lc($pre)};
my $text=$self->tag($pre,%attrs);
$text->{'xlink:href'} = $attrs{-href
} if(defined $attrs{-href
});
$text->{'target'} = $attrs{-target
} if(defined $attrs{-target
});
$tag = $SVG->title(%attributes)
Generate the title of the image.
my $tag = $SVG->title(id=>'document-title')->cdata('This is the title');
$tag = $SVG->desc(%attributes)
Generate the description of the image.
my $tag = $SVG->desc(id=>'document-desc')->cdata('This is a description');
$tag = $SVG->comment(@comments)
Generate the description of the image.
my $tag = $SVG->comment('comment 1','comment 2','comment 3');
my $tag = $self->tag('comment');
$tag->{-comment
} = [@text];
Generate a set of processing instructions
my $tag = $SVG->pi('instruction one','instruction two','instruction three');
<lt>?instruction one?<gt>
<lt>?instruction two?<gt>
<lt>?instruction three?<gt>
my $tag = $self->tag('pi');
$tag = $SVG->script(%attributes)
Generate a script container for dynamic (client-side) scripting using
ECMAscript, Javascript or other compatible scripting language.
my $tag = $SVG->script(-type=>"text/ecmascript");
# populate the script tag with cdata
# be careful to manage the javascript line ends.
# qq|text| or qq§text§ where text is the script
$tag->cdata(qq|function d(){
//simple display function
for(cnt = 0; cnt < d.length; cnt++)
document.write(d[cnt]);//end for loop
document.write("<BR>");//write a line break
my $script = $self->tag('script',%attrs);
$script->{'xlink:href'}=$attrs{-href
} if(defined $attrs{-href
});
$tag = $SVG->path(%attributes)
Draw a path element. The path vertices may be imputed as a parameter or
calculated usingthe L<"get_path"> method.
# a 10-pointsaw-tooth pattern drawn with a path definition
my $xv = [0,1,2,3,4,5,6,7,8,9];
my $yv = [0,1,0,1,0,1,0,1,0,1];
-closed => 'true' #specify that the polyline is closed
'stroke-color' => 'rgb(250,123,23)'
$path = $SVG->get_path(%attributes)
Returns the text string of points correctly formatted to be incorporated into
the multi-point SVG drawing object definitions (path, polyline, polygon)
B<Input:> attributes including:
-type = path type (path | polyline | polygon)
x = reference to array of x coordinates
y = reference to array of y coordinates
B<Output:> a hash reference consisting of the following key-value pair:
points = the appropriate points-definition string
-type = path|polygon|polyline
-relative = 1 (define relative position rather than absolute position)
-closed = 1 (close the curve - path and polygon only)
#generate an open path definition for a path.
$points = $SVG->get_path(x=>\@x,y=>\@y,-relative=>1,-type=>'path');
#add the path to the SVG document
my $p = $SVG->path(%$path, style=>\%style_definition);
#generate an closed path definition for a a polyline.
$points = $SVG->get_path(
); # generate a closed path definition for a polyline
# add the polyline to the SVG document
$p = $SVG->polyline(%$points, id=>'pline1');
B<Aliases:> get_path set_path
my $type = $attrs{-type
} || 'path';
# we need a path-like point string returned
if (lc($type) eq 'path') {
$char = ' m ' if (defined $attrs{-relative
} && lc($attrs{-relative
}));
#append the scaled value to the graph
$points .= "$char $x $y ";
$char = ' l ' if (defined $attrs{-relative
}
&& lc($attrs{-relative
}));
$points .= ' z ' if (defined $attrs{-closed
} && lc($attrs{-closed
}));
my %out = (d
=> $points);
} elsif (lc($type) =~ /^poly/){
#append the scaled value to the graph
my %out = (points
=>$points);
$tag = $SVG->animate(%attributes)
Generate an SMIL animation tag. This is allowed within any nonempty tag. Refer\
to the W3C for detailed information on the subtleties of the animate SMIL
B<Inputs:> -method = Transform | Motion | Color
my $an_ellipse = $SVG->ellipse(
cx=>30,cy=>150,rx=>10,ry=>10,id=>'an_ellipse',
stroke=>'rgb(130,220,70)',fill=>'rgb(30,20,50)');
attributeName=>"cx",values=>"20; 200; 20",dur=>"10s", repeatDur=>'indefinite');
attributeName=>"rx",values=>"10;30;20;100;50",
dur=>"10s", repeatDur=>'indefinite');
attributeName=>"ry",values=>"30;50;10;20;70;150",
dur=>"15s", repeatDur=>'indefinite');
attributeName=>"rx",values=>"30;75;10;100;20;20;150",
dur=>"20s", repeatDur=>'indefinite');
attributeName=>"fill",values=>"red;green;blue;cyan;yellow",
dur=>"5s", repeatDur=>'indefinite');
attributeName=>"fill-opacity",values=>"0;1;0.5;0.75;1",
dur=>"20s",repeatDur=>'indefinite');
attributeName=>"stroke-width",values=>"1;3;2;10;5",
dur=>"20s",repeatDur=>'indefinite');
my $method = $rtr{'-method'}; # Set | Transform | Motion | Color
# we do not want this to pollute the generation of the tag
delete $rtr{-method
}; #bug report from briac.
transform
=>'animateTransform',
my $name = $animation_method{$method} || 'animate';
#list of legal entities for each of the 5 methods of animations
qq§ begin dur end min max restart repeatCount
repeatDur fill attributeType attributeName additive
accumulate calcMode
values keyTimes keySplines
qq§ begin dur end min max restart repeatCount
repeatDur fill additive accumulate calcMode
values
keyTimes keySplines from to by calcMode path keyPoints
rotate origin type attributeName attributeType §
,
qq§ begin dur end min max restart repeatCount
repeatDur fill additive accumulate calcMode
values
to by keyTimes keySplines from path keyPoints
qq§ begin dur end min max restart repeatCount
repeatDur fill additive accumulate calcMode
values
keyTimes keySplines from to by §
,
qq§ begin dur end min max restart repeatCount repeatDur
foreach my $k (keys %rtr) {
if ($legal{$name} !~ /\b$k\b/) {
$self->error("$name.$k" => "Illegal animation command");
return $self->tag($name,%rtr);
$tag = $SVG->group(%attributes)
Define a group of objects with common properties. groups can have style,
animation, filters, transformations, and mouse actions assigned to them.
'font' => [ qw( Arial Helvetica sans ) ],
transform => 'rotate(-45)'
return $self->tag('g',%attrs);
$tag = $SVG->defs(%attributes)
define a definition segment. A Defs requires children when defined using SVG.pm
$tag = $SVG->defs(id => 'def_con_one',);
Sets/Adds style-definition for the following objects being created.
Style definitions apply to an object and all its children for all properties for
which the value of the property is not redefined by the child.
$self->{style
}=$self->{style
} || {};
foreach my $k (keys %attrs) {
$self->{style
}->{$k}=$attrs{$k};
$SVG->mouseaction(%attributes)
Sets/Adds mouse action definitions for tag
$self->{mouseaction
}=$self->{mouseaction
} || {};
foreach my $k (keys %attrs) {
$self->{mouseaction
}->{$k}=$attrs{$k};
$SVG->attrib($name, $value)
Sets/Adds attributes of an element.
$SVG->attrib $name, $value
$SVG->attrib $name, \@value
Set a hash attribute (i.e. style definitions):
$SVG->attrib $name, \%value
$svg->attrib($name,undef);
B<Aliases:> attr attribute
my ($self,$name,$val)=@_;
#verify that the current id is unique. compain on exception
if ($self->getElementByID($val)) {
$self->error($val => "ID already exists in document");
# two arguments only - retrieve
# 3rd argument is undef - delete
# 3 defined arguments - set
Sets cdata to $text. SVG.pm allows you to set cdata for any tag. 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
})->cdata('SVG.pm is a perl module on CPAN!');
my $text = $SVG->text(style=>{'font'=>'Arial','font-size'=>20});
$text->cdata('SVG.pm is a perl module on CPAN!');
E<lt>text style="font: Arial; font-size: 20" E<gt>SVG.pm is a perl module on CPAN!E<lt>/text E<gt>
L<"CDATA"> L<"desc">, L<"title">, L<"text">, L<"script">.
$self->{-cdata
}=join(' ',@txt);
$script = $SVG->script();
Generates a <![CDATA[ ... ]]> tag with the contents of $text rendered exactly as supplied. SVG.pm allows you to set cdata for any tag. 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
var groups = new Array();
* Find this SVG's document element
* Define members of each group by id
SVGDoc = e.getTarget().getOwnerDocument();
append_group(1, 4, 6); // group 0
append_group(5, 4, 3); // group 1
append_group(2, 3); // group 2
$SVG->script()->CDATA($text);
var groups = new Array();
* Find this SVG's document element
* Define members of each group by id
SVGDoc = e.getTarget().getOwnerDocument();
append_group(1, 4, 6); // group 0
append_group(5, 4, 3); // group 1
append_group(2, 3); // group 2
$self->{-CDATA
}=join('\n',@txt);
sub cdata_noxmlesc
($@
) {
$self->{-cdata_noxmlesc
}=join('\n',@txt);
$tag = $SVG->filter(%attributes)
Generate a filter. Filter elements contain L<"fe"> filter sub-elements.
my $filter = $SVG->filter(
filterUnits=>"objectBoundingBox",
filterUnits=>'objectBoundingBox'
return $self->tag('filter',%attrs);
$tag = $SVG->fe(-type=>'type', %attributes)
Generate a filter sub-element. Must be a child of a L<"filter"> element.
-type => 'DiffuseLighting' # required - element name omiting 'fe'
'font' => [ qw(Arial Helvetica sans) ],
transform => 'rotate(-45)'
Note that the following filter elements are currently supported:
=item * feComponentTransfer
=item * feDiffuseLighting
=item * feDisplacementMap
=item * feSpecularLighting
return 0 unless ($attrs{'-type'});
colormatrix
=> 'feColorMatrix',
componenttrans
=> 'feComponentTrans',
composite
=> 'feComposite',
convolvematrix
=> 'feConvolveMatrix',
diffuselighting
=> 'feDiffuseLighting',
displacementmap
=> 'feDisplacementMap',
distantlight
=> 'feDistantLight',
gaussianblur
=> 'feGaussianBlur',
mergenode
=> 'feMergeNode',
morphology
=> 'feMorphology',
pointlight
=> 'fePointLight',
specularlighting
=> 'feSpecularLighting',
spotlight
=> 'feSpotLight',
turbulence
=> 'feTurbulence'
my $key = lc($attrs{'-type'});
my $fe_name = $allowed{$key} || 'error:illegal_filter_element';
return $self->tag($fe_name, %attrs);
$tag = $SVG->pattern(%attributes)
Define a pattern for later reference by url.
my $pattern = $SVG->pattern(
patternUnits => "userSpaceOnUse",
patternContentUnits => "userSpaceOnUse"
return $self->tag('pattern',%attrs);
$tag = $SVG->set(%attributes)
Set a definition for an SVG object in one section, to be referenced in other
patternUnits => "userSpaceOnUse",
patternContentUnits => "userSpaceOnUse"
return $self->tag('set',%attrs);
$tag = $SVG->stop(%attributes)
Define a stop boundary for L<"gradient">
my $pattern = $SVG->stop(
patternUnits => "userSpaceOnUse",
patternContentUnits => "userSpaceOnUse"
return $self->tag('stop',%attrs);
$tag = $SVG->gradient(%attributes)
Define a color gradient. Can be of type B<linear> or B<radial>
my $gradient = $SVG->gradient(
my $type = $attrs{'-type'} || 'linear';
unless ($type =~ /^(linear|radial)$/) {
return $self->tag($type.'Gradient',%attrs);
=head1 GENERIC ELEMENT METHODS
The following elements are generically supported by SVG:
See e.g. L<"pattern"> for an example of the use of these methods.
#-------------------------------------------------------------------------------
my ($self,$command,$error)=@_;
if ($self->{-docref
}->{-raiseerror
}) {
die "$command: $error\n";
} elsif ($self->{-docref
}->{-printerror
}) {
print STDERR
"$command: $error\n";
$self->{errors
}{$command}=$error;
# This AUTOLOAD method is activated when '-auto' is passed to SVG.pm
my ($package,$sub)=($AUTOLOAD=~/(.*)::([^:]+)$/);
# the import routine may call us with a tag name involving '-'s
my $tag=$sub; $sub=~tr/-/_/;
# N.B.: The \ on \@_ makes sure that the incoming arguments are
# used and not the ones passed when the subroutine was created.
eval "sub $package\:\:$sub (\$;\@) { return shift->tag('$tag',\@_) }";
return $self->$sub(@_) if $self;
#-------------------------------------------------------------------------------
sub colorAllocate
($$$$) {
my ($self,$red,$green,$blue)=@_;
return 'rgb('.int($red).','.int($green).','.int($blue).')';
#-------------------------------------------------------------------------------