Q:

How to produce subscripted SVG text consistently across browsers? 

I need to produce SVG text with subscripts, but I'm having a hard time getting consistent results across browsers. 
For example, this SVG (jsFiddle) produces different results in different browsers.   With Chrome 31, for example, the opening and closing parentheses line up vertically, but not so with Firefox 25 and IE 11. 
.legend{
  font-family: Consolas, Monaco, Courier, monospace;
  font-size:13px;
}

.subscript{font-size:smaller;}
<svg width="60" height="30">
  <g transform="translate(20, 25)">
    <text class="legend">
      <tspan                                dy="-1ex">(</tspan>
      <tspan class="subscript" dx="-1.25ex" dy="+1ex">0</tspan>
      <tspan                   dx="-1ex"    dy="-1ex">)</tspan>
    </text>
  </g>
</svg>

How can I get consistent results across browsers? 
(FWIW, I'm using d3.js to generate the SVG code to do this.) 

A:

kjo, you already found an answer, but this also works for me (see below for "me"):
<svg width="60" height="30">
    <g transform="translate(20, 25)">
        <text class="legend">
            <tspan dy="-1ex">(</tspan>
            <tspan dx="-1ex" dy="+1ex"><tspan class="subscript">0</tspan></tspan>
            <tspan dx="-1ex" dy="-1ex">)</tspan>
        </text>
    </g>
</svg>

Result:

-- it seems the size inside the tspan is relative to the size of the text in that same span. ( I decreased the text offset from -1.25ex to -1ex to get the same visual distance for the '0'.) 
"Me" is Safari 6.0.4 on OSX 10.7.5, and the parentheses appear misaligned with your original SVG but not with mine.