#!/usr/bin/perl

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

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;


__END__



<?xml version="1.0" encoding="iso-8859-1"?>


<!-- ========================================================================= -->
<!-- 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     -->
<!-- exercised.                                                                -->
<!--               							                                               -->
<!-- @author        Sheng Pei, Vincent Hardy                                   -->
<!--                XML Technology Center, Sun Microsystems Inc.               -->
<!-- @version       1.1, July 5 2000                                           -->
<!-- @version       1.0, June 27  2000                                         -->
<!--                                                                           -->
<!-- Copyright Sun Microsystems Inc., 2000-2002                                -->
<!-- ========================================================================= -->


<svg width="500" height="500" xml:space="default"> 

  <desc> This example shows some more features of SVG Text. </desc>
  <title> Sample 3: text </title>
		<defs>
			<g id="marker" style="stroke-width:1">
				<line x1="-15" y1="0" x2="15" y2="0" style="stroke:currentColor" />
				<line y1="-15" x1="0" y2="15" x2="0" style="stroke:currentColor" />
				<circle cx="0" cy="0" r="3" style="fill:currentColor" />
			</g>
		</defs>

<!-- ===================================================================== -->
<!-- Simple text element, for the graphics title.                          -->
<!-- This illustrates a very simple text element where text is centered    -->
<!-- about its anchor.                                                     -->
<!-- ===================================================================== -->

<!-- Draw simple text -->
<text x="200" y="80" style="text-anchor:middle; font-size:60; font-weight:800; font-family:Verdana; font-style:italic">SVG Text</text>

<!-- Display marker for the anchor point -->
<use xlink:href="#marker" style="color:black" transform="translate(200, 80)"/>

<!-- ===================================================================== -->
<!-- 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 -->
  <defs>
    <path id="Path1"
          d="M -100 0 c 0 -100 200 -100 200 0" />
  </defs>

	<g id="textLayout1" transform="translate(200, 250)">

		<!-- Draw the path on which text is laid out -->
  	<use xlink:href="#Path1" style="stroke:yellow; stroke-width:40; fill:none;" />
  	<use xlink:href="#Path1" style="stroke:black; stroke-width:1; fill:none;" />

		<!-- Layout text on path -->
  	<text style="font-family:Verdana; font-size:80; font-weight:800; fill:blue; text-anchor:middle">
			<textPath xlink:href="#Path1" startOffset="0" >
<tspan style="fill:black">S</tspan>
<tspan style="stroke:black; fill:white;">V</tspan>
<tspan style="fill:red">G</tspan>  
    	</textPath>
  	</text>

	</g> <!-- textLayout1 -->

<!-- ======================================================================= -->
<!-- The second part of the picture: 'is' following the right vertical line  -->
<!-- This illustrates glyph layout capabilities, here top to bottom layout.  -->
<!-- ======================================================================= -->

  <defs>
    <path id="Path2"
          d="M 100 0 l 0 150" />
  </defs>

	<g id="textLayout2" transform="translate(200, 250)" >

  	<use xlink:href="#Path2" style="stroke:red; stroke-width:40" />


		<!-- Here we change the writing-mode of the text element to 'tb' (for 'top to bottom') -->
  	<text x="100" y="75" style="font-family:Verdana; font-weight:800; font-size:50; 
																fill:white; writing-mode:tb; text-anchor:middle">is</text>

		<use xlink:href="#marker" style="color:black;" transform="translate(100, 75)" />
	</g>


<!-- ====================================================================== -->
<!-- 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 -->
  <defs>
    <path id="Path3"
          d="M 100 150 l -200 0" />
  </defs>

	<!-- Draw the path on which text is laid out -->

	<g id="textLayout3" transform="translate(200, 250)">
  	<use xlink:href="#Path3" style="stroke:yellow; stroke-width:40" />
  	<use xlink:href="#Path3" style="stroke:black; stroke-width:1" />

  	<text style="font-family:Verdana; font-size:40; font-weight:900; fill:black; stroke:none; text-anchor:middle">
    	<textPath xlink:href="#Path3" xml:space="default">very</textPath>
  	</text>

	</g> <!-- textLayout3 -->

<!-- ======================================================================== -->
<!-- The fourth part of the picture: 'cool' following the left vertical line  -->
<!-- This further illustrates tspan, this time directly in a text element.    -->
<!-- ======================================================================== -->

  <defs>
    <path id="Path4"
          d="M -100 150 l 0 -150" />
  </defs>

	<g id="textLayout4" transform="translate(200, 250)">
  	<use xlink:href="#Path4" style="stroke:red; stroke-width:40" />

  	<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)">
<tspan dy="0">
cool!
</tspan>
<tspan dy="-25" style="font-size:10; stroke:none; fill:black;">
SVG
</tspan>
  	</text>

  	<use transform="translate(-100, 75)" xlink:href="#marker" style="color:black;" />
	</g>

<!-- ============================================================================= -->
<!-- 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.                                    -->
<!-- ============================================================================= -->

	<g id="textLayout5" transform="translate(180, 290)" style="font-weight:800">

		<use xlink:href="#marker" style="fill:black; stroke:black" transform="translate(30, 50)" />

		<!-- Anchored to the end -->
  	<text x="30" y="50" style="font-family:Verdana; font-size:100; 
					stroke:black; fill:none; text-anchor:end">S</text>
      

		<!-- Anchored to the start -->
  	<text x="30" y="50" style="font-family:Verdana; font-size:40; 
        	font-weight:700; stroke:black; fill:none; text-anchor:start">G</text>
      

<!-- When the orientation is 'top_bottom' using 'start' as the anchor makes -->
<!-- the glyph aligns to the upper line                                     -->

		<use xlink:href="#marker" style="color:red" transform="translate(48, -30)" />

		<!-- Anchored to the start, with top to bottom text layout -->
  	<text x="48" y="-30" style="font-family:Verdana; font-size:50; 
        	stroke:red; fill:none; writing-mode:tb; text-anchor:start">
      	V
  	</text>

	</g>

</svg>
