MathJax innerhalb SVG

Ich mache etwas schreiben, wo ich MathJax verwenden, um die Mathematik zu rendern. Gelegentlich füge ich auch SVG-Diagramme hinzu, die dynamisch von Javascript generiert werden. Diese SVG-Diagramme enthalten gelegentlich Mathematik.MathJax innerhalb SVG

Ich möchte die Textelemente in diesen SVG-Diagrammen mit MathJax gerendert werden. Ich weiß, wie man cause the dynamic math to be rendered. Die Ausgabe von mathjax ist jedoch in <span> s, die nicht gültig SVG sind und nicht angezeigt werden.

Dies bleibt bestehen, wenn ich MathJax für die Verwendung des SVG-Ausgabemodus konfiguriere, obwohl dies möglicherweise auf eine falsche Verwendung des SVG-Ausgabemodus zurückzuführen ist. Ich änderte durch MathJax CDN Verbindung zu http://cdn.mathjax.org/mathjax/2.1-latest/MathJax.js?config=TeX-AMS-MML_SVG, die SVG-Ausgabe nicht produzierte. Ich konnte MathJax noch nicht dazu bringen, tatsächlich SVG-Elemente auszugeben.

Ich habe überlegt, ein SVG <foreignObject> Tag zu verwenden, das nicht ideal ist, weil (nach meinem Wissen) ich eine Breite und Höhe angeben muss, was unbequem ist.

Gibt es eine bessere Möglichkeit, MathJax gerenderten Text in SVG in HTML einzuschließen?

Quelle

2013-04-12 So8res

Hinweis aus der Zukunft: cdn.mathjax.org nähert sich seinem Ende der Lebensdauer, überprüfen https://www.mathjax.org/cdn-shutting-down/ für Migration Tipps. –

Gegenwärtig ist die einzige Möglichkeit, MathJax in ein SVG-Diagramm einzubeziehen, <foreignObject>. Ja, es ist nicht ideal, nicht nur, weil Sie eine Größe angeben müssen, sondern auch, weil IE9 + <foreignObject> nicht unterstützt.

Wenn Sie für die SVG-Ausgabe das MathJax-Kontextmenü zum Auswählen eines mathematischen Rendervorgangs verwendet haben, wird dadurch die Rendererauswahl im Dokument außer Kraft gesetzt, sodass Sie aus diesem Grund möglicherweise weiterhin die HTML-CSS-Ausgabe sehen. Der Wert wird in einem Cookie gespeichert, sodass er von Sitzung zu Sitzung gespeichert wird. Sie können den Cookie löschen, um die Einstellung zu entfernen, oder das Menü "MathJax" erneut verwenden, um das SVG-Rendering auszuwählen.

Beachten Sie jedoch, dass Ihnen das auch nicht weiterhilft, da die SVG-Ausgabe von MathJax nicht nur ein SVG-Snippet ist, das in eine größere SVG-Datei eingefügt werden kann, sondern auch HTML und das <svg>-Element enthält. Darüber hinaus benötigt MathJax das umgebende HTML, um Dinge wie die zu verwendende Schriftgröße und einige andere Faktoren zu bestimmen, so dass es nicht direkt in Ihr SVG-Diagramm eingefügt werden kann.

Der <foreignObject> Ansatz ist wirklich der einzige zuverlässige Weg im Moment.

bearbeitet: Hier ist ein vollständiges Beispiel:

<!DOCTYPE html> 
<html> 
<head> 
<title>MathJax in SVG diagram</title> 
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_SVG"></script> 
</head> 
<body> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="500"> 
    <circle cx="100" cy="100" r="99" fill="yellow" stroke="red" /> 
    <circle cx="100" cy="100" r="3" fill="blue" /> 
    <foreignObject x="100" y="100" width="100" height="100"> 
    <div xmlns="http://www.w3.org/1999/xhtml" style="font-family:Times; font-size:15px"> 
    \(\displaystyle{x+1\over y-1}\) 
    </div> 
    </foreignObject> 
</svg> 
</body> 
</html>

Quelle

2013-04-12 14:11:29

würden Sie irgendwo ein vollständiges Beispiel haben? Ich habe das in einem IPython-Notebook ausprobiert und konnte den Mathe-Teil nicht verarbeiten (obwohl andere Formeln auf derselben Seite richtig behandelt werden). TIA! – akim

@akim, Ich habe ein Beispiel zu meiner Antwort hinzugefügt. –

Vielen Dank. Eigentlich habe ich genau dieses gleiche Beispiel schon gefunden :) Aber ich kann es nicht in einem IPython-Notebook zum Laufen bringen :(Die LaTeX \ (\), $ ... $ usw. bleiben bestehen. Eigentlich funktioniert es, wenn ich ein Volles HTML-Widget, aber ich habe es nicht funktioniert, wenn ich versuche, ein SVG-Widget zu generieren.Alle Anhaltspunkte? – akim

Es gibt einen Weg Mathjax SVG-Elemente in einem SVG-Diagramm zu schließen, ohne foreignObject zu erfordern. Eine vollständige Demonstration der Technik ist bei http://puzlet.com/m/b00b3.

Sagen Sie bitte ein SVG-Diagramm wie diese (und alle SVG-Elemente enthält) in Ihrer Webseite:

<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>

und die folgende Mathjax:

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

verwendet Coffeescript (plus jQuery) um das MathJax-Element in Ihr SVG-Diagramm zu integrieren:

Sie können auch dieverwendenund height() Methoden für die Zentrierung und vertikale Ausrichtung.

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 + ([email protected] * @viewBox().baseVal.y) 
     @group[0].setAttribute "transform", 
      "translate(#{@dx} #{dy}) scale(#{@scale}) matrix(1 0 0 -1 0 0)" 

    appendTo: (diagram) -> 
     diagram.append @group

Quelle

2014-02-21 00:55:45 martinc

Können Sie erklären, was hier vor sich geht? Ich würde wirklich gerne eine Abhängigkeit von CoffeeScript und jQuery vermeiden, nur um dies zu tun, wenn es eine einfache Aufgabe ist. –

nm, habe ich herausgefunden, dass ich eine entkoppelte Lösung posten werde, wenn ich eine Chance bekomme –

MathJax innerhalb SVG

Antwort

Verwandte Themen