css - 如何跨浏览器一致地生成带下标的 SVG 文本？

Question

我需要生成带有下标的 SVG 文本，但我很难在不同浏览器中获得一致的结果。

例如，这个 SVG ( jsFiddle ) 在不同的浏览器中产生不同的结果。例如，在 Chrome 31 中，左括号和右括号垂直排列，但在 Firefox 25 和 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>

如何在浏览器中获得一致的结果？

(FWIW，我正在使用 d3.js 生成 SVG 代码来执行此操作。)

Answer 1

kjo，你已经找到了答案，但这也适用于我(见下文“我”):

<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>

结果:

-- tspan 中的大小似乎与同一跨度中的文本大小 相关。 (我将文本偏移量从 -1.25ex 减少到 -1ex 以获得与“0”相同的视觉距离。)

“我”是 OSX 10.7.5 上的 Safari 6.0.4，括号似乎与您的原始 SVG 不对齐，但与我的不对齐。