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

All > SVG > Text > text-textAnchor-BE-05


File: text-textAnchor-BE-05
Author: Lofton Henderson
Origin: W3C SVG conformance suite

Rendered imageSVG source
ElementsAttributes
axlink:href |
defs
descid |
gid | style |
linestyle | x1 | x2 | y1 | y2 |
pathd | id | style |
rectheight | id | style | width | x | y |
svgheight | id | width |
textid | style | x | y |
textPathstartOffset | style | xlink:href |
titleid |
trefxlink:href |
tspanstyle | 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-textAnchor-BE-05</title>
     <desc id="test-desc">Test viewer basic capability to handle 'text-anchor' property.</desc>
     <g id="test-body-content">
          <defs>
               <text id="tref-internal-reference">Text-anchor: end. Text w/ tref</text>
               <path id="myPath" d="M 0 255 225 255"/>
          </defs>
          <text x="75" y="25" style="font-family:Helvetica;font-size:12;fill:black;">Basic test of 'text-anchor' alignment property.</text>
          <text x="45" y="375" style="font-size:12;">(The red line corresponds to the "initial current text position".)</text>
          <line x1="225" y1="45" x2="225" y2="365" style="stroke:red;"/>
          <text x="5" y="55" style="font-family:Helvetica;font-size:14;fill:black;">Simple text.</text>
          <g style="font-size:12;fill:blue;">
               <text x="225" y="75">Text-anchor: none</text>
               <text x="225" y="95" style="text-anchor:start;">Text-anchor: start</text>
               <text x="225" y="115" style="text-anchor:middle;">Text-anchor: middle</text>
               <text x="225" y="135" style="text-anchor:end;">Text-anchor: end</text>
          </g>
          <g style="font-size:10;fill:black;">
               <text x="20" y="75">none...</text>
               <text x="20" y="95">start...</text>
               <text x="20" y="115">middle...</text>
               <text x="20" y="135">end...</text>
          </g>
          <text x="5" y="175" style="font-family:Helvetica;font-size:14;fill:black;">Tspan, tref, toap</text>
          <g style="font-family:Helvetica;font-size:12;fill:blue;">
               <text x="225" y="195" style="text-anchor:start;">Text-anchor: start. Blue text w/
                    <tspan xml:space="preserve" style="fill:red;"> red tspan</tspan>
               </text>
               <text x="225" y="215" style="text-anchor:middle;">Text-anchor: middle. Text with
                    <tspan style="font-weight:bold;" xml:space="preserve"> bold tspan</tspan>
               </text>
               <text x="225" y="235" style="text-anchor:end;">
                    <tref xlink:href="#tref-internal-reference"/>
               </text>
               <text style="text-anchor:end;">
                    <textPath style="text-anchor:end;" startOffset="100%" xlink:href="#myPath">Text-anchor: end. Text on path</textPath>
               </text>
          </g>
          <g style="font-family:Helvetica;font-size:10;fill:black;">
               <text x="20" y="195">tspan...</text>
               <text x="20" y="215">tspan...</text>
               <text x="20" y="235">tref...</text>
               <text x="20" y="255">textPath...</text>
          </g>
          <text x="5" y="290" style="font-family:Helvetica;font-size:14;fill:black;">Changes in chunks.</text>
          <g style="font-family:Helvetica;font-size:12;fill:blue;">
               <text x="225" y="310" style="text-anchor:end;">Begin with "end" align,
                    <tspan x="225" y="330" xml:space="preserve" style="text-anchor:middle;"> and switch to middle in a tspan, </tspan>
                    <tspan x="225" y="350" style="text-anchor:start;">and finish with start in another tspan.</tspan>
               </text>
          </g>
          <g style="font-family:Helvetica;font-size:10;fill:black;">
               <text x="20" y="310">end...</text>
               <text x="20" y="330">middle...</text>
               <text x="20" y="350">start...</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-textAnchor-BE-05</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