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

GENERIC ELEMENT METHODS

806       The following elements are generically supported by SVG:
807
808       * altGlyph
809
810       * altGlyphDef
811
812       * altGlyphItem
813
814       * clipPath
815
816       * color-profile
817
818       * cursor
819
820       * definition-src
821
822       * font-face-format
823
824       * font-face-name
825
826       * font-face-src
827
828       * font-face-url
829
830       * foreignObject
831
832       * glyph
833
834       * glyphRef
835
836       * hkern
837
838       * marker
839
840       * mask
841
842       * metadata
843
844       * missing-glyph
845
846       * mpath
847
848       * switch
849
850       * symbol
851
852       * tref
853
854       * view
855
856       * vkern
857
858       See e.g. "pattern" for an example of the use of these methods.
859
860
861
862perl v5.8.8                       2008-04-21                   SVG::Element(3)