SVG Text Baseline

Hello,

I'm having some trouble specifying the baseline for SVG text elements.  The
SVG specification:

http://www.w3.org/TR/SVG/text.html#BaselineAlignmentProperties

describes that the 'dominant-baseline' attribute of a text element will
specify the baseline for that text element.  However, the following SVG
document does not appear to show any change of baseline when viewed.  I am
viewing in Adobe's SVG viewer pluging under MSIE:

<?xml version="1.0"?>

<svg width="640" height="480">
   <defs>
      <symbol id="crosshair">
       <g transform="translate(5,5)">
          <line stroke="red" x1="-5" y1="0" x2="5" y2="0"/>
          <line stroke="red" x1="0" y1="-5" x2="0" y2="5"/>
       </g>
      </symbol>
   </defs>

   <g>
      <text text-anchor="start" font-family="Arial" font-size="48" x="20"
y="50">Left</text>
      <use xlink:href="#crosshair" transform="translate(15,45)"/>
      <text text-anchor="middle" font-family="Arial" font-size="48" x="280"
y="50">Center</text>
      <use xlink:href="#crosshair" transform="translate(275,45)"/>
      <text text-anchor="end" font-family="Arial" font-size="48" x="520"
y="50">Right</text>
      <use xlink:href="#crosshair" transform="translate(515,45)"/>
   </g>

   <g transform="translate(0,100)">
      <text dominant-baseline="text-bottom" text-anchor="start"
font-family="Arial" font-size="48" x="20" y="50">Left</text>
      <use xlink:href="#crosshair" transform="translate(15,45)"/>
      <text dominant-baseline="text-bottom" text-anchor="middle"
font-family="Arial" font-size="48" x="280" y="50">Center</text>
      <use xlink:href="#crosshair" transform="translate(275,45)"/>
      <text dominant-baseline="text-bottom" text-anchor="end"
font-family="Arial" font-size="48" x="520" y="50">Right</text>
      <use xlink:href="#crosshair" transform="translate(515,45)"/>
   </g>

   <g transform="translate(0,200)">
      <text dominant-baseline="central" text-anchor="start"
font-family="Arial" font-size="48" x="20" y="50">Left</text>
      <use xlink:href="#crosshair" transform="translate(15,45)"/>
      <text dominant-baseline="central" text-anchor="middle"
font-family="Arial" font-size="48" x="280" y="50">Center</text>
      <use xlink:href="#crosshair" transform="translate(275,45)"/>
      <text dominant-baseline="central" text-anchor="end"
font-family="Arial" font-size="48" x="520" y="50">Right</text>
      <use xlink:href="#crosshair" transform="translate(515,45)"/>
   </g>

   <g transform="translate(0,300)">
      <text dominant-baseline="text-top" text-anchor="start"
font-family="Arial" font-size="48" x="20" y="50">Left</text>
      <use xlink:href="#crosshair" transform="translate(15,45)"/>
      <text dominant-baseline="text-top" text-anchor="middle"
font-family="Arial" font-size="48" x="280" y="50">Center</text>
      <use xlink:href="#crosshair" transform="translate(275,45)"/>
      <text dominant-baseline="text-top" text-anchor="end"
font-family="Arial" font-size="48" x="520" y="50">Right</text>
      <use xlink:href="#crosshair" transform="translate(515,45)"/>
   </g>
</svg>

After some quiet strenuous searching of examples and tutorials on the net,
I've not been able to find a single example of non default text baselines in
an SVG document.  Any suggestions?

Thanks,

--

Jacob,
Aspiring Software Architect,
http://homepages.paradise.net.nz/lost

Received on Thursday, 10 April 2003 19:45:14 UTC