Tutorial 4:

text, tspan, textPath, and links. Linking inside and outside the document.

This tutorial is in process. Please come back at another time. If you are really keen, The source code and results are in the links below.

#!/usr/bin/perl

use SVG;
use strict;
use CGI  ':header';

my $p = CGI->new;
print $p->header(-type=>'image/svg+xml');

my $svg = SVG->new(width=>500,height=>500);
$svg->desc()->cdata('This example shows some more features of SVG Text');
$svg->title()->cdata('Sample 3: text');

$svg->comment(
'hello I am a dog. Actually, I am an SVG demo of the perl SVG.pm module',
'While the original static example was done by SUN, this is a 100% dynamic',
'sample. Case in point. Last time I looked, the SUN sample did not work on any',
'of my browser implementations.',
'=========================================================================',
'SVG Sample Pool : Text',
'This sample shows some powerful features of SVG Text elements ',
'among which are the "text" element; "tspan" element; "textPath" element;',
'text orientation management using "writing-mode" and text alignment',
'using property of "text-anchor".  Some font-related features are also',
'Sun @author        Sheng Pei, Vincent Hardy ',
'Copyright Sun Microsystems Inc., 2000-2002 ',
'Notice that the copyright is next year!! Today is 13.10.01 (editor)',
'I wondef if the copyright includes machine-generated renditions of',
'the content, like I am doing. Awfully presumptuous to copyright',
'content that is being offered as a sample of SVG application',
'=========================================================================',
);

my $defg_m = $svg->defs()->group(id=>'marker',style=>{"stroke-width"=>1});
$defg_m->line(x1=>-15,y1=>0,x2=>15,y2=>0,style=>{'stroke'=>'currentColor'});
$defg_m->line(y1=>-15,x1=>0,y2=>15,x2=>0,style=>{'stroke'=>'currentColor'});

$svg->comment(
'=====================================================================',
'Simple text element, for the graphics title.                         ',
'This illustrates a very simple text element where text is centered   ',
'about its anchor.                                                    ',
'=====================================================================',
'Draw simple text');
$svg->text(x=>200, y=>80, style=>
  {'text-anchor'=>'middle', 'font-size'=>60, 'font-weight'=>800, 'font-family'=>'Verdana', 'font-style'=>'italic'})->cdata('hello, Sun.');

$svg->comment('Display marker for the anchor point');
$svg->use(-href=>"#marker", style=>"color:black", transform=>'translate(200, 80)');

$svg->comment(
'=====================================================================',
"The first part of the picture: 'SVG' following the upper curved line",
'defs / xlink:href in textPath is the way to achieve text on a path.',
'This illustrates: text, textPath and tspan',
'=====================================================================',
'Define the path on which text is laid out');
my $path = $svg->get_path(x=>[-100,0, 200,200],y=>[0,-100,-100,0]);
$svg->defs()->path(id=>"Path1",%$path);



my $textLayout1 = $svg->group(id=>"textLayout1", transform=>"translate(200, 250)");

		$textLayout1->comment('Draw the path on which text is laid out');
  	$textLayout1->use(-href=>"#Path1", style=>{stroke=>'yellow','stroke-width'=>40, 'fill'=>'none'});
  	$textLayout1->use(-href=>"#Path1", style=>{stroke=>'black','stroke-width'=>1, fill=>'none'});

		$textLayout1->comment('Layout text on path');
  	$textLayout1->text(style=>{'font-family'=>'Verdana',
                  'font-size'=>80, 'font-weight'=>800,
                  fill=>'blue', 'text-anchor'=>'middle'});

		my $textLayoutpath1 = $textLayout1->text(-type=>'path', -href=>"#Path1", startOffset=>"0");
    $textLayoutpath1->text(-type=>'span', style=>"fill:black")->cdata('S');
    $textLayoutpath1->text(-type=>'span', style=>{stroke=>'black',fill=>'white'})->cdata('V');
    $textLayoutpath1->text(-type=>'span', style=>"fill:red")->cdata('G');

$svg->comment('textLayout1',
'=======================================================================',
"The second part of the picture: 'is' following the right vertical line ",
'This illustrates glyph layout capabilities, here top to bottom layout.',
'======================================================================='
);

  $svg->defs()->path(id=>"Path2", d=>"M 100 0 l 0 150");




 my $tl2 = $svg->group(id=>"textLayout2" ,transform=>"translate(200, 250)");

  	$tl2->use(-href=>"#Path2", style=>{stroke=>'red', 'stroke-width'=>40});


		$tl2->comment("Here we change the writing-mode of the text element to 'tb' (for 'top to bottom')");
  
    $tl2->text( x=>"100", y=>"75", style=>{'font-family'=>'Verdana', 'font-weight'=>800, 'font-size'=>50,fill=>'white', 'writing-mode'=>'tb', 'text-anchor'=>'middle'})->cdata('is');

		$tl2->use( -href=>"#marker", style=>"color:black;", transform=>"translate(100, 75)" );

  

$svg->comment('======================================================================',
"Third part of the picture: 'very' following the bottom horizontal line",
'This illustrates one way of displaying text upside down.              ',
'======================================================================',
'Define the path where the text is laid out');

  $svg->defs()->path(id=>"Path3", d=>"M 100 150 l -200 0");


$svg->comment('Draw the path on which text is laid out');
my $tl3 = $svg->group( id=>"textLayout3", transform=>"translate(200, 250)");
$tl3->use(-href=>"#Path3", style=>"stroke:yellow; stroke-width:40");
$tl3->use( -href=>"#Path3", style=>{stroke=>'black','stroke-width'=>1});
$tl3->text(style=>{ 'font-family'=>'Verdana', 'font-size'=>40,
                    'font-weight'=>900, fill=>'black',
                    stroke=>'none', 'text-anchor'=>'middle'} );
$tl3->text(type=>'path', -href=>"#Path3", 'xml:space'=>"default")->cdata('very');

$svg->comment('textLayout3');





$svg->comment('========================================================================',
"The fourth part of the picture: 'cool' following the left vertical line",
'This further illustrates tspan, this time directly in a text element.',
'========================================================================');

$svg->defs()->path(id=>"Path4", d=>"M -100 150 l 0 -150" );


my $tl4 = $svg->group(id=>"textLayout4", transform=>"translate(200, 250)");

  	$tl4->use( -href=>"#Path4", style=>"stroke:red; stroke-width:40");

  	my $tl4_t = $tl4->text( x=>"0", y=>"0", 
                style=>{'font-family'=>'Verdana', 'font-size'=>50, 
                        'font-style'=>'italic',fill=>'white',
                         stroke=>'black', 'writing-mode'=>'lr',
                         'text-anchor'=>"middle"},
					      transform=>"translate(-100, 75) rotate(-90)");
$tl4_t->tspan(dy=>"0")->cdata('cool!');
$tl4_t->tspan(dy=>"-25", 
              style=>{'font-size'=>10, stroke=>'none', fill=>'black'})
              ->cdata('SVG');
$tl4_t->tspan(dy=>"0",style=>{'font-size'=>10, stroke=>'none', fill=>'black'})->cdata('SVG');

$tl4->use(transform=>"translate(-100, 75)", -href=>"#marker", style=>"color:black;");

$svg->comment(
'=============================================================================',
"Below are steps to produce the 'SVG' in the box, mainly using the text-anchor",
'to align the three glyphs                                          				  ',
'This illustrates the various text anchors.                                   ',
'=============================================================================');

	my $tl5 = $svg->group( id=>"textLayout5", transform=>"translate(180, 290)", style=>"font-weight:800");

		$tl5->use( -href=>"#marker", style=>{fill=>'black', stroke=>'black',transform=>'translate(30, 50)'});

		$tl5->comment('Anchored to the end');
  	$tl5->text( x=>"30", y=>"50", style=>{'font-family'=>'Verdana','font-size'=>100, 
					stroke=>'black', fill=>'none', 'text-anchor'=>'end'})->cdata('S');
      

		$tl5->comment('Anchored to the start');
  	$tl5->text( x=>"30", y=>"50", 
                style=>{'font-family'=>'Verdana', 'font-size'=>40, 
        	              'font-weight'=>700, stroke=>'black',fill=>'none',
                        'text-anchor'=>'start'})
                ->cdata('G');
      

		$tl5->comment("When the orientation is 'top_bottom' using 'start' as the anchor makes",
    'the glyph aligns to the upper line',);

		$tl5->use(-href=>"#marker", style=>"color:red", transform=>"translate(48, -30)");

		$tl5->comment('Anchored to the start, with top to bottom text layout');
  	$tl5->text( x=>"48", y=>"-30", 
                style=>{'font-family'=>'Verdana',
                        'font-size'=>50,stroke=>'red',
                        fill=>'none','writing-mode'=>'tb', 
                        'text-anchor'=>'start'})
                ->cdata('V');


$svg->anchor(-href=>"http://roasp.com/")->text(x=>200, y=>160, style=>
  {'text-anchor'=>'middle', 'font-size'=>30, 'font-weight'=>800, 'font-family'=>'Verdana', 'font-style'=>'italic', opacity=>0.3})->cdata('Use SVG.pm');

print $svg->xmlify;