ZVON > References > Zvon Example Repository
Example repository: index | categories | search

All > SVG > Text > text-tspan-BE-02


File: text-tspan-BE-02
Author: Lofton Henderson
Origin: W3C SVG conformance suite

Rendered imageSVG source
ElementsAttributes
axlink:href |
descid |
gid | style |
pathd | style |
rectheight | id | style | width | x | y |
svgheight | id | width |
textstyle | x | y |
titleid |
tspandx | dy | style | x | xml:space | y |

Source

<svg id="svg-root" width="450" height="450" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" >
     <title id="test-title">text-tspan-BE-02</title>
     <desc id="test-desc">Test viewer capability to handle the basics of 'tspan'.</desc>
     <g id="test-body-content">
          <text x="65" y="20" style="font-family:Helvetica;font-size:12;">Basics of tspan: changing visual properties and positioning.</text>
          <g id="tspan01" style="font-family:Helvetica;font-size:15;">
               <text x="74" y="63.75" style="fill:blue;">You are
                    <tspan style="font-weight:bold;fill:red;" xml:space="preserve"> not </tspan>a banana.
               </text>
               <rect x="47.5" y="80.25" width="210.5" height="35.5" style="fill:none;stroke:#000000;"/>
               <text x="65.25" y="90.75" style="font-family:Helvetica;font-size:10;">Text: "You are not a banana."</text>
               <text x="65.25" y="102" style="font-family:Helvetica;font-size:10;">'tspan' changes visual attributes of "not",</text>
               <text x="65.25" y="113.25" style="font-family:Helvetica;font-size:10;">to red, bold.</text>
          </g>
          <g id="tspan02" style="font-family:Helvetica;font-size:15;">
               <text x="187.5" y="183.75" style="fill:blue;">But you
                    <tspan dx="2em" dy="-18.75" style="font-weight:bold;fill:red;">are</tspan>
                    <tspan dy="37.5" xml:space="preserve"> a peach!</tspan>
               </text>
               <rect x="165" y="211" width="185.5" height="35.5" style="fill:none;stroke:#000000;"/>
               <text x="188" y="221" style="font-family:Helvetica;font-size:10;">Text: "But you are a peach!"</text>
               <text x="188" y="232.25" style="font-family:Helvetica;font-size:10;">Using dx,dy, 'tspan' raises "are",</text>
               <text x="188" y="243.5" style="font-family:Helvetica;font-size:10;">'tspan' lowers "a peach!"</text>
          </g>
          <g id="tspan03" style="fill:#000000;font-family:Helvetica;font-size:15;">
               <text style="fill:rgb(255,164,0);">
                    <tspan x="75 93.75 112.5 131.25 150.5 168.75 187.5 206.25" y="290">Cute and</tspan>
                    <tspan x="103.13 121.88 140.63 159.38 178.13" y="322.5">fuzzy.</tspan>
               </text>
               <rect x="37.5" y="334.75" width="235.5" height="35.5" style="fill:none;stroke:#000000;"/>
               <text x="56.25" y="345" style="font-family:Helvetica;font-size:10;">Text: "Cute and fuzzy."</text>
               <text x="56.25" y="356.25" style="font-family:Helvetica;font-size:10;">'tspan' char-by-char placement of "Cute and",</text>
               <text x="56.25" y="367.5" style="font-family:Helvetica;font-size:10;">'tspan' char-by-char "fuzzy", below it.</text>
          </g>
     </g>
     <g id="test-legend" style="fill:black;font-family:Helvetica;font-size:10;">
          <rect x="10" y="390" width="275" height="50" style="fill:none;stroke:#000000;"/>
          <path style="fill:none;stroke:#000000;" d="M10 405 h275 M205 405 v35 M10 426 h195 M205 422 h80"/>
          <text x="25" y="401">Scalable Vector Graphics (SVG) Conformance Suite</text>
          <a xlink:href="copyright-documents-19990405.html">
               <text x="12" y="437" style="fill:blue;">Copyright 2000 W3C. All Rights Reserved.</text>
          </a>
          <text style="font-size:12;" x="35" y="420">text-tspan-BE-02</text>
          <text style="font-size:10;" x="210" y="417">$Revision: 1.1 $</text>
          <text style="font-size:10;" x="210" y="435">Release 2.0</text>
          <rect id="test-frame" x="1" y="1" width="448" height="448" style="fill:none;stroke:#000000;"/>
     </g>
</svg>



Sponsored links: Domain Names, VoIP Internettelefonie, DSL, SDSL, ADSL, UNLIMITED Web Hosting by HostDepartment, conference call service, answering service