SVG中的下标和上标

Question

我正在尝试使用此站点中的以下代码显示SVG的子上标和上标

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g>
    <text x = "10" y = "25" font-size = "20">
        <tspan>
            e = mc 
            <tspan baseline-shift = "super">2</tspan>
        </tspan>
        <tspan x = "10" y = "60">
            T 
            <tspan baseline-shift = "sub">i+2</tspan>
            =T 
            <tspan baseline-shift = "sub">i</tspan>
            + T 
            <tspan baseline-shift = "sub">i+1</tspan>
        </tspan>
    </text>
</g>

但是子/上标不会在IE或Firefox中显示.这是未实现还是存在其他问题？[你能看到下标显示正确吗？]

Answer 1

IE9,IE10和Firefox不支持基线转换,请参阅:

http://msdn.microsoft.com/en-us/library/gg558060(v=vs.85).aspx https://bugzilla.mozilla.org/show_bug.cgi?id=308338

如果您正在尝试显示公式,那么更好的拟合将是嵌入在SVG中的MathML,请参阅:

http://www.maths-informatique-jeux.com/international/mathml_with_other_standards/index.php

如果你想要一个你提供的例子的quickfix,你可以用dy... 模拟基线转移

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g>
    <text x = "10" y = "25" font-size = "20">
        <tspan>
            e = mc 
            <tspan dy ="-10">2</tspan>
        </tspan>
        <tspan x = "10" y = "60">
            T 
            <tspan dy="10">i+2</tspan>
            <tspan dy="-10">=T </tspan>
            <tspan dy="10">i</tspan>
            <tspan dy="-10">+ T</tspan> 
            <tspan dy="10">i+1</tspan>
        </tspan>
    </text>
    </g>
</svg>

http://jsfiddle.net/UQ5Dp/