« 2014年9月 | トップページ | 2016年2月 »

2015年6月

2015年6月14日 (日)

XyJax は SVG 表示方式にするとエラー発生

MathJax のレンダリングは HTML-CSS や MathML など幾つか方式が有りますが、それを SVG 方式にして XyJax を使用するとエラーが発生しました。 Chrome のデベロッパーツールでエラーメッセージを確認すると


Uncaught TypeError: Cannot read property 'Get' of undefined
となっていました。また、発生個所は xypic.js の 5208 行目でした。


MathJax.Hub.Register.StartupHook("Device-Independent Xy-pic Require",function () {
    ・・・
    ・・・
  HUB.formatError = function (script, err) {
    if (err.xyjaxError !== undefined) {
      ・・・
      ・・・
    } else {
      throw err;    // ←エラー箇所
      hub_formatError.apply(HUB, [script, err]);
    }
  }

ただし、ここはエラーを throw した箇所なので、本当の発生個所ではありません。エラーメッセージによると、オブジェクトが undefined なので Get を読み込むことが出来ないということです。そこで xypic.js で Get を探したのですが、見つけることが出来ませんでした。これでは、何が undefined なのか判りません。エラーの原因を見つけるには、デベロッパーツールでステップ実行して動作を追跡する必要があります。そのうち気が向いたらすることにして、今日のところは置いておきます。

なお、 XyJax のサイトによると、 SVG 表示方式には対応済みとなっていますが、そうでもなかったということでしょうか?

ところで、 MathJax は、その表示箇所を右クリックして表示方式を変更することが出来るようになっていますが、今回のエラーが発生すると、表示方式の変更が出来なくなります。たとえページを再読み込みしても変更は出来ません。ブラウザーにも依るのかも知れませんが、 Cookie をクリアしないと元の表示に戻りません。

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 の数式を表示している例を見たことが有るのですが、ブラウザによっては対応していないのも有るので、上のような方法にしました。

« 2014年9月 | トップページ | 2016年2月 »