26

MathJax を使用して数学をレンダリングするところを書いています。また、javascript によって動的に生成される SVG ダイアグラムを含めることもあります。これらの SVG 図には、数学が含まれることがあります。

これらの SVG ダイアグラムのテキスト要素を MathJax を使用してレンダリングしたいと考えています。動的演算をレンダリングする方法を知っています。ただし、mathjax の出力は<span>有効な SVG ではなく、表示されない s にあります。

これは、SVG 出力モードを使用するように MathJax を構成しても持続しますが、これはおそらく SVG 出力モードの不適切な使用が原因です。MathJax CDN リンクを に変更しましたがhttp://cdn.mathjax.org/mathjax/2.1-latest/MathJax.js?config=TeX-AMS-MML_SVG、SVG 出力は生成されませんでした。MathJax を実際に SVG 要素を出力するように誘導することはまだできていません。

<foreignObject>(私の知る限りでは) 幅と高さを指定する必要があるため、理想的ではないSVG タグの使用を検討しましたが、これは不便です。

HTML内のSVG内にMathJaxでレンダリングされたテキストを含めるより良い方法はありますか?

4

3 に答える 3

4

を必要とせずに、SVG ダイアグラムに MathJax SVG 要素を含める方法がありますforeignObject。このテクニックの完全なデモンストレーションはhttp://puzlet.com/m/b00b3にあります。

Web ページに次のような SVG ダイアグラム (および SVG 要素を含む) があるとします。

<svg id="diagram" xmlns='http://www.w3.org/2000/svg' 
    xmlns:xlink="http://www.w3.org/1999/xlink"
    version='1.1' width='720' height='100'>
</svg>

および次の MathJax:

<div id="mathjaxSource">
$\Omega$
</div>

この CoffeeScript (および jQuery) を使用して、MathJax 要素を SVG ダイアグラムに統合します。

diagram = $("#diagram")  # SVG diagram
obj = new MathJaxObject "mathjaxSource"  # MathJax object (see class definition below)
obj.appendTo diagram  # Append MathJax object to diagram
obj.translate 100, 200  # Position MathJax object within diagram

width()およびheight()メソッドを使用して、中央揃えと垂直方向の配置を行うこともできます。

class MathJaxObject

    constructor: (@divId, @scale=0.02) ->
        @source = $("##{@divId}").find ".MathJax_SVG"
        @svg = @source.find "svg"
        g = @svg.find "g"
        @group = $(g[0]).clone()
        @translate 0, 0

    viewBox: -> @svg[0].viewBox

    width: -> @scale * @viewBox().baseVal.width

    height: -> @scale * @viewBox().baseVal.height

    translate: (@dx, @dy) ->
        dy = @dy + (-@scale * @viewBox().baseVal.y)
        @group[0].setAttribute "transform", 
            "translate(#{@dx} #{dy}) scale(#{@scale}) matrix(1 0 0 -1 0 0)"

    appendTo: (diagram) ->
        diagram.append @group
于 2014-02-21T00:55:45.353 に答える