7

このサイトの次のコードを使用して、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 では表示されません。これは実装されていませんか、それとも別の問題がありますか? 【正しく表示されている添え字が見えますか？】

4

1 に答える 1

13

Baseline-shift は、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

提供した例のクイックフィックスが必要な場合は、ベースラインシフトをエミュレートできます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>

<a href="http://jsfiddle.net/UQ5Dp/" rel="noreferrer">http://jsfiddle.net/UQ5Dp/

于 2012-09-08T21:36:04.073 に答える