如何跨浏览器一致地生成下载的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

看起来达到预期效果的方法是使用像素而不是ex / em单位作为偏移参数。

例如，这是可以接受的：

<svg width="60" height="30">
  <g transform="translate(20, 20)">
    <text class="legend">
      <tspan                   dy="-0px">(</tspan>
      <tspan class="subscript" dy="+5px">0</tspan>
      <tspan                   dy="-5px">)</tspan>
    </text>
  </g>
</svg>

（其中subscript类的CSS中有font-size:smaller。）

这意味着，当然，更改字体大小需要更改这些垂直偏移。我能想到的唯一解决方案是以编程方式设置所有这些值，也可以使用px而不是pt来表示字体大小。然后，可以通过编程方式将垂直偏移的像素设置为字体大小的某个乘数。

Answer 2

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不对齐，但与我的不一致。