1SVG::Element(3)       User Contributed Perl Documentation      SVG::Element(3)
2
3
4

NAME

6       SVG::Element - Generate the element bits for SVG.pm
7

AUTHOR

9       Ronan Oger, cpan@roitsystems.com
10

SEE ALSO

12       perl(1),SVG,SVG::XML,SVG::Element,SVG::Parser, SVG::Manual
13       <http://www.roitsystems.com/> ROASP.com: Serverside SVG server
14       <http://www.roitsystems.com/> ROIT Systems: Commercial SVG perl
15       solutions <http://www.w3c.org/Graphics/SVG/> SVG at the W3C
16
17   tag (alias: element)
18       $tag = $SVG->tag($name, %attributes)
19
20       Generic element generator. Creates the element named $name with the
21       attributes specified in %attributes. This method is the basis of most
22       of the explicit element generators.
23
24       Example:
25
26           my $tag = $SVG->tag('g', transform=>'rotate(-45)');
27
28   anchor
29       $tag = $SVG->anchor(%attributes)
30
31       Generate an anchor element. Anchors are put around objects to make them
32       'live' (i.e. clickable). It therefore requires a drawn object or group
33       element as a child.
34
35       optional anchor attributes
36
37       the following attributes are expected for anchor tags (any any tags
38       which use -href links):
39
40   -href    required =head2 -type    optional =head2 -role    optional =head2
41       -title   optional =head2 -show    optional =head2 -arcrole optional
42       =head2 -actuate optional =head2 target   optional
43       For more information on the options, refer to the w3c XLink
44       specification at <http://www.w3.org/TR/xlink/>
45
46       Example:
47
48           # generate an anchor
49           $tag = $SVG->anchor(
50                -href=>'http://here.com/some/simpler/SVG.SVG'
51                -title => 'new window 2 example title',
52                -actuate => 'onLoad',
53                -show=> 'embed',
54
55           );
56
57       for more information about the options above, refer to Link  section in
58       the SVG recommendation: <http://www.w3.org/TR/SVG11/linking.html#Links>
59
60           # add a circle to the anchor. The circle can be clicked on.
61           $tag->circle(cx=>10,cy=>10,r=>1);
62
63           # more complex anchor with both URL and target
64           $tag = $SVG->anchor(
65                 -href   => 'http://somewhere.org/some/other/page.html',
66                 target => 'new_window'
67           );
68
69   circle
70       $tag = $SVG->circle(%attributes)
71
72       Draw a circle at (cx,cy) with radius r.
73
74       Example:
75
76           my $tag = $SVG->circlecx=>4, cy=>2, r=>1);
77
78   ellipse
79       $tag = $SVG->ellipse(%attributes)
80
81       Draw an ellipse at (cx,cy) with radii rx,ry.
82
83       Example:
84
85           my $tag = $SVG->ellipse(
86               cx=>10, cy=>10,
87               rx=>5, ry=>7,
88               id=>'ellipse',
89               style=>{
90                   'stroke'=>'red',
91                   'fill'=>'green',
92                   'stroke-width'=>'4',
93                   'stroke-opacity'=>'0.5',
94                   'fill-opacity'=>'0.2'
95               }
96           );
97
98   rectangle (alias: rect)
99       $tag = $SVG->rectangle(%attributes)
100
101       Draw a rectangle at (x,y) with width 'width' and height 'height' and
102       side radii 'rx' and 'ry'.
103
104       Example:
105
106           $tag = $SVG->rectangle(
107               x=>10, y=>20,
108               width=>4, height=>5,
109               rx=>5.2, ry=>2.4,
110               id=>'rect_1'
111           );
112
113   image
114        $tag = $SVG->image(%attributes)
115
116       Draw an image at (x,y) with width 'width' and height 'height' linked to
117       image resource '-href'. See also "use".
118
119       Example:
120
121           $tag = $SVG->image(
122               x=>100, y=>100,
123               width=>300, height=>200,
124               '-href'=>"image.png", #may also embed SVG, e.g. "image.SVG"
125               id=>'image_1'
126           );
127
128       Output:
129
130           <image xlink:href="image.png" x="100" y="100" width="300" height="200"/>
131
132   use
133       $tag = $SVG->use(%attributes)
134
135       Retrieve the content from an entity within an SVG document and apply it
136       at (x,y) with width 'width' and height 'height' linked to image
137       resource '-href'.
138
139       Example:
140
141           $tag = $SVG->use(
142               x=>100, y=>100,
143               width=>300, height=>200,
144               '-href'=>"pic.SVG#image_1",
145               id=>'image_1'
146           );
147
148       Output:
149
150           <use xlink:href="pic.SVG#image_1" x="100" y="100" width="300" height="200"/>
151
152       According to the SVG specification, the 'use' element in SVG can point
153       to a single element within an external SVG file.
154
155   polygon
156       $tag = $SVG->polygon(%attributes)
157
158       Draw an n-sided polygon with vertices at points defined by a string of
159       the form 'x1,y1,x2,y2,x3,y3,... xy,yn'. The "get_path" method is
160       provided as a convenience to generate a suitable string from coordinate
161       data.
162
163       Example:
164
165           # a five-sided polygon
166           my $xv = [0,2,4,5,1];
167           my $yv = [0,0,2,7,5];
168
169           $points = $a->get_path(
170               x=>$xv, y=>$yv,
171               -type=>'polygon'
172           );
173
174           $c = $a->polygon(
175               %$points,
176               id=>'pgon1',
177               style=>\%polygon_style
178           );
179
180       SEE ALSO:
181
182       "polyline", "path", "get_path".
183
184   polyline
185       $tag = $SVG->polyline(%attributes)
186
187       Draw an n-point polyline with points defined by a string of the form
188       'x1,y1,x2,y2,x3,y3,... xy,yn'. The "get_path" method is provided as a
189       convenience to generate a suitable string from coordinate data.
190
191       Example:
192
193           # a 10-pointsaw-tooth pattern
194           my $xv = [0,1,2,3,4,5,6,7,8,9];
195           my $yv = [0,1,0,1,0,1,0,1,0,1];
196
197           $points = $a->get_path(
198               x=>$xv, y=>$yv,
199               -type=>'polyline',
200               -closed=>'true' #specify that the polyline is closed.
201           );
202
203           my $tag = $a->polyline (
204               %$points,
205               id=>'pline_1',
206               style=>{
207                   'fill-opacity'=>0,
208                   'stroke-color'=>'rgb(250,123,23)'
209               }
210           );
211
212   line
213       $tag = $SVG->line(%attributes)
214
215       Draw a straight line between two points (x1,y1) and (x2,y2).
216
217       Example:
218
219           my $tag = $SVG->line(
220               id=>'l1',
221               x1=>0, y1=>10,
222               x2=>10, y2=>0
223           );
224
225       To draw multiple connected lines, use "polyline".
226
227   text
228       $text = $SVG->text(%attributes)->cdata();
229
230       $text_path = $SVG->text(-type=>'path'); $text_span =
231       $text_path->text(-type=>'span')->cdata('A'); $text_span =
232       $text_path->text(-type=>'span')->cdata('B'); $text_span =
233       $text_path->text(-type=>'span')->cdata('C');
234
235       define the container for a text string to be drawn in the image.
236
237       Input:
238           -type     = path type (path | polyline | polygon)
239           -type     = text element type  (path | span | normal [default])
240
241       Example:
242
243           my $text1 = $SVG->text(
244               id=>'l1', x=>10, y=>10
245           )->cdata('hello, world');
246
247           my $text2 = $SVG->text(
248               id=>'l1', x=>10, y=>10, -cdata=>'hello, world');
249
250           my $text = $SVG->text(
251               id=>'tp', x=>10, y=>10 -type=>path)
252               ->text(id=>'ts' -type=>'span')
253               ->cdata('hello, world');
254
255       SEE ALSO:
256
257           L<"desc">, L<"cdata">.
258
259   title
260       $tag = $SVG->title(%attributes)
261
262       Generate the title of the image.
263
264       Example:
265
266           my $tag = $SVG->title(id=>'document-title')->cdata('This is the title');
267
268   desc
269       $tag = $SVG->desc(%attributes)
270
271       Generate the description of the image.
272
273       Example:
274
275           my $tag = $SVG->desc(id=>'document-desc')->cdata('This is a description');
276
277   comment
278       $tag = $SVG->comment(@comments)
279
280       Generate the description of the image.
281
282       Example:
283
284           my $tag = $SVG->comment('comment 1','comment 2','comment 3');
285
286       $tag = $SVG->pi(@pi)
287
288       Generate (or adds) a set of processing instructions which go at the
289       beginning of the document after the xml start tag
290
291       Example:
292
293           my $tag = $SVG->pi('instruction one','instruction two','instruction three');
294
295           returns:
296             <?instruction one?>
297             <?instruction two?>
298             <?instruction three?>
299
300   script
301       $tag = $SVG->script(%attributes)
302
303       Generate a script container for dynamic (client-side) scripting using
304       ECMAscript, Javascript or other compatible scripting language.
305
306       Example:
307
308           my $tag = $SVG->script(type=>"text/ecmascript");
309
310           # populate the script tag with cdata
311           # be careful to manage the javascript line ends.
312           # qq|text| or qqXtextX where text is the script
313           # works well for this.
314
315           $tag->CDATA(qq|function d(){
316               //simple display function
317               for(cnt = 0; cnt < d.length; cnt++)
318                   document.write(d[cnt]);//end for loop
319               document.write("<BR>");//write a line break
320             }|
321           );
322           # create an svg external script reference to an outside file
323           my $tag2 = SVG->script(type=>"text/ecmascript", -href="/scripts/example.es");
324
325   style
326       $tag = $SVG->style(%attributes)
327
328       Generate a style container for inline or xlink:href based styling
329       instructions
330
331       Example:
332
333           my $tag = $SVG->style(type=>"text/css");
334
335           # populate the style tag with cdata
336           # be careful to manage the line ends.
337           # qq|text| or qqXtextX where text is the script
338           # works well for this.
339
340           $tag1->CDATA(qq|
341               rect     fill:red;stroke:green;
342               circle   fill:red;stroke:orange;
343               ellipse  fill:none;stroke:yellow;
344               text     fill:black;stroke:none;
345               |);
346
347           # create a external css stylesheet reference
348           my $tag2 = $SVG->style(type=>"text/css", -href="/resources/example.css");
349
350   path
351       $tag = $SVG->path(%attributes)
352
353       Draw a path element. The path vertices may be imputed as a parameter or
354       calculated usingthe "get_path" method.
355
356       Example:
357
358           # a 10-pointsaw-tooth pattern drawn with a path definition
359           my $xv = [0,1,2,3,4,5,6,7,8,9];
360           my $yv = [0,1,0,1,0,1,0,1,0,1];
361
362           $points = $a->get_path(
363               x => $xv,
364               y => $yv,
365               -type   => 'path',
366               -closed => 'true'  #specify that the polyline is closed
367           );
368
369           $tag = $SVG->path(
370               %$points,
371               id    => 'pline_1',
372               style => {
373                   'fill-opacity' => 0,
374                   'fill-color'   => 'green',
375                   'stroke-color' => 'rgb(250,123,23)'
376               }
377           );
378
379       SEE ALSO:
380
381       "get_path".
382
383   get_path
384       $path = $SVG->get_path(%attributes)
385
386       Returns the text string of points correctly formatted to be
387       incorporated into the multi-point SVG drawing object definitions (path,
388       polyline, polygon)
389
390       Input: attributes including:
391
392           -type     = path type (path | polyline | polygon)
393           x         = reference to array of x coordinates
394           y         = reference to array of y coordinates
395
396       Output: a hash reference consisting of the following key-value pair:
397
398           points    = the appropriate points-definition string
399           -type     = path|polygon|polyline
400           -relative = 1 (define relative position rather than absolute position)
401           -closed   = 1 (close the curve - path and polygon only)
402
403       Example:
404
405           #generate an open path definition for a path.
406           my ($points,$p);
407           $points = $SVG->get_path(x=&gt\@x,y=&gt\@y,-relative=&gt1,-type=&gt'path');
408
409           #add the path to the SVG document
410           my $p = $SVG->path(%$path, style=>\%style_definition);
411
412           #generate an closed path definition for a a polyline.
413           $points = $SVG->get_path(
414               x=>\@x,
415               y=>\@y,
416               -relative=>1,
417               -type=>'polyline',
418               -closed=>1
419           ); # generate a closed path definition for a polyline
420
421           # add the polyline to the SVG document
422           $p = $SVG->polyline(%$points, id=>'pline1');
423
424       Aliases: get_path set_path
425
426   animate
427       $tag = $SVG->animate(%attributes)
428
429       Generate an SMIL animation tag. This is allowed within any nonempty
430       tag. Refer\ to the W3C for detailed information on the subtleties of
431       the animate SMIL commands.
432
433       Inputs: -method = Transform | Motion | Color
434
435         my $an_ellipse = $SVG->ellipse(
436             cx=>30,cy=>150,rx=>10,ry=>10,id=>'an_ellipse',
437             stroke=>'rgb(130,220,70)',fill=>'rgb(30,20,50)');
438
439         $an_ellipse-> animate(
440             attributeName=>"cx",values=>"20; 200; 20",dur=>"10s", repeatDur=>'indefinite');
441
442         $an_ellipse-> animate(
443             attributeName=>"rx",values=>"10;30;20;100;50",
444             dur=>"10s", repeatDur=>'indefinite');
445
446         $an_ellipse-> animate(
447             attributeName=>"ry",values=>"30;50;10;20;70;150",
448             dur=>"15s", repeatDur=>'indefinite');
449
450         $an_ellipse-> animate(
451             attributeName=>"rx",values=>"30;75;10;100;20;20;150",
452             dur=>"20s", repeatDur=>'indefinite');
453
454         $an_ellipse-> animate(
455             attributeName=>"fill",values=>"red;green;blue;cyan;yellow",
456             dur=>"5s", repeatDur=>'indefinite');
457
458         $an_ellipse-> animate(
459             attributeName=>"fill-opacity",values=>"0;1;0.5;0.75;1",
460             dur=>"20s",repeatDur=>'indefinite');
461
462         $an_ellipse-> animate(
463             attributeName=>"stroke-width",values=>"1;3;2;10;5",
464             dur=>"20s",repeatDur=>'indefinite');
465
466   group
467       $tag = $SVG->group(%attributes)
468
469       Define a group of objects with common properties. groups can have
470       style, animation, filters, transformations, and mouse actions assigned
471       to them.
472
473       Example:
474
475           $tag = $SVG->group(
476               id        => 'xvs000248',
477               style     => {
478                   'font'      => [ qw( Arial Helvetica sans ) ],
479                   'font-size' => 10,
480                   'fill'      => 'red',
481               },
482               transform => 'rotate(-45)'
483           );
484
485   defs
486       $tag = $SVG->defs(%attributes)
487
488       define a definition segment. A Defs requires children when defined
489       using SVG.pm Example:
490
491           $tag = $SVG->defs(id  =>  'def_con_one',);
492
493   style
494       $SVG->style(%styledef)
495
496       Sets/Adds style-definition for the following objects being created.
497
498       Style definitions apply to an object and all its children for all
499       properties for which the value of the property is not redefined by the
500       child.
501
502   mouseaction
503       $SVG->mouseaction(%attributes)
504
505       Sets/Adds mouse action definitions for tag
506
507       $SVG->attrib($name, $value)
508
509       Sets/Adds attributes of an element.
510
511       Retrieve an attribute:
512
513           $svg->attrib($name);
514
515       Set a scalar attribute:
516
517           $SVG->attrib $name, $value
518
519       Set a list attribute:
520
521           $SVG->attrib $name, \@value
522
523       Set a hash attribute (i.e. style definitions):
524
525           $SVG->attrib $name, \%value
526
527       Remove an attribute:
528
529           $svg->attrib($name,undef);
530
531       Aliases: attr attribute
532
533   cdata
534       $SVG->cdata($text)
535
536       Sets cdata to $text. SVG.pm allows you to set cdata for any tag. If the
537       tag is meant to be an empty tag, SVG.pm will not complain, but the
538       rendering agent will fail. In the SVG DTD, cdata is generally only
539       meant for adding text or script content.
540
541       Example:
542
543           $SVG->text(
544               style => {
545                   'font'      => 'Arial',
546                   'font-size' => 20
547               })->cdata('SVG.pm is a perl module on CPAN!');
548
549           my $text = $SVG->text(style=>{'font'=>'Arial','font-size'=>20});
550           $text->cdata('SVG.pm is a perl module on CPAN!');
551
552       Result:
553
554           E<lt>text style="font: Arial; font-size: 20" E<gt>SVG.pm is a perl module on CPAN!E<lt>/text E<gt>
555
556       SEE ALSO:
557
558         L<"CDATA"> L<"desc">, L<"title">, L<"text">, L<"script">.
559
560   CDATA
561        $script = $SVG->script();
562        $script->CDATA($text);
563
564       Generates a <![CDATA[ ... ]]> tag with the contents of $text rendered
565       exactly as supplied. SVG.pm allows you to set cdata for any tag. If the
566       tag is meant to be an empty tag, SVG.pm will not complain, but the
567       rendering agent will fail. In the SVG DTD, cdata is generally only
568       meant for adding text or script content.
569
570       Example:
571
572             my $text = qqX
573               var SVGDoc;
574               var groups = new Array();
575               var last_group;
576
577               /*****
578               *
579               *   init
580               *
581               *   Find this SVG's document element
582               *   Define members of each group by id
583               *
584               *****/
585               function init(e) {
586                   SVGDoc = e.getTarget().getOwnerDocument();
587                   append_group(1, 4, 6); // group 0
588                   append_group(5, 4, 3); // group 1
589                   append_group(2, 3);    // group 2
590               }X;
591               $SVG->script()->CDATA($text);
592
593       Result:
594
595           E<lt>script E<gt>
596             <gt>![CDATA[
597               var SVGDoc;
598               var groups = new Array();
599               var last_group;
600
601               /*****
602               *
603               *   init
604               *
605               *   Find this SVG's document element
606               *   Define members of each group by id
607               *
608               *****/
609               function init(e) {
610                   SVGDoc = e.getTarget().getOwnerDocument();
611                   append_group(1, 4, 6); // group 0
612                   append_group(5, 4, 3); // group 1
613                   append_group(2, 3);    // group 2
614               }
615               ]]E<gt>
616
617       SEE ALSO:
618
619         L<"cdata">, L<"script">.
620
621   filter
622       $tag = $SVG->filter(%attributes)
623
624       Generate a filter. Filter elements contain "fe" filter sub-elements.
625
626       Example:
627
628           my $filter = $SVG->filter(
629               filterUnits=>"objectBoundingBox",
630               x=>"-10%",
631               y=>"-10%",
632               width=>"150%",
633               height=>"150%",
634               filterUnits=>'objectBoundingBox'
635           );
636
637           $filter->fe();
638
639       SEE ALSO:
640
641       "fe".
642
643   fe
644       $tag = $SVG->fe(-type=>'type', %attributes)
645
646       Generate a filter sub-element. Must be a child of a "filter" element.
647
648       Example:
649
650           my $fe = $SVG->fe(
651               -type     => 'diffuselighting'  # required - element name in lower case omiting 'fe'
652               id        => 'filter_1',
653               style     => {
654                   'font'      => [ qw(Arial Helvetica sans) ],
655                   'font-size' => 10,
656                   'fill'      => 'red',
657               },
658               transform => 'rotate(-45)'
659           );
660
661       Note that the following filter elements are currently supported: Also
662       note that the elelemts are defined in lower case in the module, but as
663       of version 2.441, any case combination is allowed.
664
665   * feBlend
666   * feColorMatrix
667   * feComponentTransfer
668   * feComposite
669   * feConvolveMatrix
670   * feDiffuseLighting
671   * feDisplacementMap
672   * feDistantLight
673   * feFlood
674   * feFuncA
675   * feFuncB
676   * feFuncG
677   * feFuncR
678   * feGaussianBlur
679   * feImage
680   * feMerge
681   * feMergeNode
682   * feMorphology
683   * feOffset
684   * fePointLight
685   * feSpecularLighting
686   * feSpotLight
687   * feTile
688   * feTurbulence
689       SEE ALSO:
690
691       "filter".
692
693   pattern
694       $tag = $SVG->pattern(%attributes)
695
696       Define a pattern for later reference by url.
697
698       Example:
699
700           my $pattern = $SVG->pattern(
701               id     => "Argyle_1",
702               width  => "50",
703               height => "50",
704               patternUnits        => "userSpaceOnUse",
705               patternContentUnits => "userSpaceOnUse"
706           );
707
708   set
709       $tag = $SVG->set(%attributes)
710
711       Set a definition for an SVG object in one section, to be referenced in
712       other sections as needed.
713
714       Example:
715
716           my $set = $SVG->set(
717               id     => "Argyle_1",
718               width  => "50",
719               height => "50",
720               patternUnits        => "userSpaceOnUse",
721               patternContentUnits => "userSpaceOnUse"
722           );
723
724   stop
725       $tag = $SVG->stop(%attributes)
726
727       Define a stop boundary for "gradient"
728
729       Example:
730
731          my $pattern = $SVG->stop(
732              id     => "Argyle_1",
733              width  => "50",
734              height => "50",
735              patternUnits        => "userSpaceOnUse",
736              patternContentUnits => "userSpaceOnUse"
737          );
738
739       $tag = $SVG->gradient(%attributes)
740
741       Define a color gradient. Can be of type linear or radial
742
743       Example:
744
745           my $gradient = $SVG->gradient(
746               -type => "linear",
747               id    => "gradient_1"
748           );
749

GENERIC ELEMENT METHODS

751       The following elements are generically supported by SVG:
752
753   * altGlyph
754   * altGlyphDef
755   * altGlyphItem
756   * clipPath
757   * color-profile
758   * cursor
759   * definition-src
760   * font-face-format
761   * font-face-name
762   * font-face-src
763   * font-face-url
764   * foreignObject
765   * glyph
766   * glyphRef
767   * hkern
768   * marker
769   * mask
770   * metadata
771   * missing-glyph
772   * mpath
773   * switch
774   * symbol
775   * tref
776   * view
777   * vkern
778       See e.g. "pattern" for an example of the use of these methods.
779
780
781
782perl v5.12.0                      2008-04-21                   SVG::Element(3)