html5 - incrustar - MathJax dentro de SVG
svg web (3)
Actualmente, la única forma de incluir MathJax dentro de un diagrama SVG es a través de <foreignObject> . Sí, no es lo ideal, no solo porque necesita proporcionar un tamaño, sino también porque IE9 + no admite <foreignObject> .
En cuanto a la salida de SVG, si ha utilizado el menú contextual de MathJax para seleccionar una representación matemática, esto anulará la opción de representación en el documento, por lo que es posible que siga viendo la salida de HTML-CSS por ese motivo. El valor se almacena en una cookie, de modo que se recordará de una sesión a otra. Puede eliminar la cookie para eliminar la configuración, o usar el menú MathJax nuevamente para seleccionar la representación SVG.
Sin embargo, tenga en cuenta que esto tampoco lo ayudará, ya que la salida SVG de MathJax no es solo un fragmento SVG que puede incluirse en un archivo SVG más grande, sino que incluye algo de HTML y el propio elemento <svg> . Además, MathJax necesita el HTML circundante para determinar cosas como el tamaño de fuente que se debe utilizar y algunos otros factores, por lo que no podrá ubicarse directamente en su diagrama SVG.
El enfoque <foreignObject> es realmente la única forma confiable en este momento.
Edición : Aquí hay un ejemplo completo:
<!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>
Estoy escribiendo algo en el que uso MathJax para representar las matemáticas. También ocasionalmente incluyo diagramas SVG generados dinámicamente por javascript. Esos diagramas SVG ocasionalmente incluyen matemáticas.
Me gustaría que los elementos de texto en esos diagramas SVG se representen usando MathJax. Sé cómo hacer que las matemáticas dinámicas se representen . Sin embargo, la salida de mathjax está en <span> s que no son SVG válidos y no aparecen.
Esto persiste cuando configuro MathJax para usar el modo de salida SVG, aunque esto quizás se deba a un uso incorrecto del modo de salida SVG. Cambié el enlace de MathJax CDN a http://cdn.mathjax.org/mathjax/2.1-latest/MathJax.js?config=TeX-AMS-MML_SVG , que no produjo la salida de SVG. Todavía no he podido convencer a MathJax para que produzca elementos SVG.
He considerado usar una etiqueta SVG <foreignObject> que no es ideal porque (que yo sepa) debo especificar un ancho y una altura, lo cual es un inconveniente.
¿Hay una mejor manera de incluir texto renderizado MathJax dentro de SVG dentro de HTML?
Hay una manera de incluir elementos SVG de MathJax en un diagrama SVG, sin necesidad de foreignObject . Una demostración completa de la técnica se encuentra en http://puzlet.com/m/b00b3 .
Digamos que tienes un diagrama SVG como este (y que contiene elementos SVG) en tu página web:
<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>
y el siguiente MathJax:
<div id="mathjaxSource">
$/Omega$
</div>
Use este CoffeeScript (más jQuery) para integrar el elemento MathJax en su diagrama 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
También puede utilizar los métodos de width() y height() para centrar y alinear verticalmente.
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
He usado lo siguiente, que define una función que toma el código de látex como entrada y agrega el svg procesado MathJax a un elemento SVG de destino.
// First create a new element to hold the initial Latex code
// and eventual MathJax generated SVG. This element isn''t added
// to the main docuemnt, so it''s never seen.
let mathBuffer = document.createElement("div");
// Then define a function that takes LaTeX source code
// and places the resulting generated SVG in a target SVG element.
mathSVG = function (latex, target) {
// Update the buffer with the source latex.
mathBuffer.textContent = latex;
// Get MathJax to process and typeset.
MathJax.Hub.Queue(["Typeset", MathJax.Hub, mathBuffer]);
// Queue a callback function that will execute once it''s finished typesetting.
MathJax.Hub.Queue(function () {
// This (svg) is the generated graphics.
const svg = mathBuffer.childNodes[1].childNodes[0];
// The next line is optional, play with positioning as you see fit.
svg.setAttribute("y", "-11pt");
// Move the generated svg from the buffer to the target element.
target.appendChild(svg);
// Clear the buffer.
mathBuffer.textContent = "";
});
};
En lo anterior, estoy asumiendo un documento host HTML con elementos svg dentro. También debería funcionar en un documento svg host también.