« 数式を動的に変える(プレビューの応用) | トップページ | XyJax は SVG 表示方式にするとエラー発生 »

2015年6月 6日 (土)

SVG に MathJax を被せる

球の衝突図

以前に書いた「アニメーション機能の実装、その前に」で png 形式の左図を使用していますが、文字が気に入らないので、これを MathJax で表示することを試してみました。ついでに、画像を SVG で作り直しました。

1
\(v_0\)
\(v_1\)
\(u_1\)
\(\require{color}\textcolor{blue}{\alpha}\)
\(\textcolor{blue}{\beta}\)
それが左図です。


コードの概略は次のようになっています。


<div style="float:left; position:relative; margin-right:5px">
    <svg
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="280"
        height="210"
        viewBox="0 0 200 150">    <!-- width, height が viewBox と異なるのは画像の表示サイズの調整のため -->
        ・・・
        ・・・
    </svg>

    <div style="position:absolute; top:75px; left:110px">\(v_0\)</div>
    <div style="position:absolute; top:110px; left:130px">\(v_1\)</div>
    <div style="position:absolute; top:60px; left:150px">\(u_0\)</div>
    <div style="position:absolute; top:77px; left:185px">\(\require{color}\textcolor{blue}{\alpha}\)</div>
    <div style="position:absolute; top:110px; left:180px">\(\textcolor{blue}{\beta}\)</div>
</div>

ここに図の右側の文章が来る
<br style="clear:left" />
図と文字を合わせて div タグで囲い、 それを position:relative にした後、文字の位置は position:absolute にして次のように指定します。

    <div style="position:absolute; top:75px; left:110px">\(v_0\)</div>
他のサイトで、 foreignObject タグを使用して SVG 内で MathJax の数式を表示している例を見たことが有るのですが、ブラウザによっては対応していないのも有るので、上のような方法にしました。

« 数式を動的に変える(プレビューの応用) | トップページ | XyJax は SVG 表示方式にするとエラー発生 »

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/584699/61702418

この記事へのトラックバック一覧です: SVG に MathJax を被せる:

« 数式を動的に変える(プレビューの応用) | トップページ | XyJax は SVG 表示方式にするとエラー発生 »