SVG 中的下标和上标

问题描述 投票:0回答:1
svg
1个回答
17
投票

IE9、IE10 和 Firefox 不支持基线偏移,请参阅:

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

如果您确实尝试显示公式,更适合的方法是将 MathML 嵌入到 SVG 中,请参阅:

https://developer.mozilla.org/en-US/docs/Web/MathML

如果您想要快速修复您提供的示例,您可以使用

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/

© www.soinside.com 2019 - 2024. All rights reserved.