Имеется перевод этой страницы на английский язык.
Скрипт MathJax4SVG.js
обеспечивает поддержку для MathJax в документах SVG.
В настоящее время MathJax отображает
MathML лишь в документах (X)HTML. Скрипт
делает простой трюк: он заворачивает MathML в
XHTML документ и вставляет элемент <script>
, ссылающийся на скрипт
MathJax, в раздел <head>
этого документа XHTML.
Страница проекта на SourceForge находится по адресу http://sourceforge.net/projects/mathjax4svg/.
Последнюю версию скрипта MathJax4SVG можно загрузить с SourceForge.
Имеется несколько возможностей использовать SVG в веб-страницах:
<object>
или
<iframe>
.
<img>
.
url(…)
.
Два последних способа исключают исполнение скриптов, и поэтому MathJax4SVG в них неприменим.
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- $URL: svn+ssh://concyclic@svn.code.sf.net/p/mathjax4svg/code/sources/site/examples/UsageWithinStandaloneSVG.svg $ $Id: UsageWithinStandaloneSVG.svg 7 2014-06-06 07:16:01Z concyclic $ --> <!DOCTYPE svg [ <!ENTITY it "⁢"> <!ENTITY leqslant "⩽"> ]> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 200 200" width="200" height="200" > <defs> <script xlink:href="MathJax4SVG.js" type="application/ecmascript"/> </defs> <circle cx="100" cy="100" r="75" fill="lightblue" stroke="navy" stroke-width="2"/> <foreignObject x="60" y="85"> <math xmlns="http://www.w3.org/1998/Math/MathML"> <msqrt> <mi>x</mi> <mo>⁢</mo> <mi>y</mi> </msqrt> <mo>⩽</mo> <mfrac> <mrow> <mi>x</mi> <mo>+</mo> <mi>y</mi> </mrow> <mn>2</mn> </mfrac> </math> </foreignObject> </svg>
Обратите внимание, что все ссылки на сущности MathML должны быть либо разрешены, либо объявлены в декларации типа документа.
Если атрибут width
или height
не указан, скрипт
MathJax4SVG.js
устанавливает ширину или высоту элемента
<foreignObject>
автоматически.
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- $URL: svn+ssh://concyclic@svn.code.sf.net/p/mathjax4svg/code/sources/site/examples/UsageWithinXHTMLObjects.xhtml $ $Id: UsageWithinXHTMLObjects.xhtml 5 2014-06-05 01:35:35Z concyclic $ --> <html xmlns="http://www.w3.org/1999/xhtml" version="1.1" > <head> <script src="MathJax4SVG.js" type="application/ecmascript"></script> </head> <body> <p> <object data="UsageWithinXHTMLObjects.svg" type="image/svg+xml"/> </p> </body> </html>
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- $URL: svn+ssh://concyclic@svn.code.sf.net/p/mathjax4svg/code/sources/site/examples/UsageWithinXHTMLObjects.svg $ $Id: UsageWithinXHTMLObjects.svg 4 2014-06-03 13:58:53Z concyclic $ --> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" > <rect x="25" y="25" width="150" height="150" fill="wheat" stroke="orange" stroke-width="2"/> <foreignObject x="32.5" y="80"> <math xmlns="http://www.w3.org/1998/Math/MathML"> <munderover> <mi>∫</mi> <mrow> <mi>−</mi> <mi>∞</mi> </mrow> <mi>∞</mi> </munderover> <msup> <mi>e</mi> <mrow> <mi>−</mi> <msup> <mi>x</mi> <mn>2</mn> </msup> </mrow> </msup> <mspace width="thinmathspace"/> <mi>d</mi> <mi>x</mi> <mo>=</mo> <msqrt> <mi>π</mi> </msqrt> </math> </foreignObject> </svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- $URL: svn+ssh://concyclic@svn.code.sf.net/p/mathjax4svg/code/sources/site/examples/UsageWithinXHTML.xhtml $ $Id: UsageWithinXHTML.xhtml 2 2014-05-31 18:46:46Z concyclic $ --> <html xmlns="http://www.w3.org/1999/xhtml" version="1.1" > <head> <script src="MathJax4SVG.js" type="application/ecmascript"></script> </head> <body> <p> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200" > <polygon points="25 100 100 175 175 100 100 25" fill="lightgreen" stroke="darkgreen" stroke-width="2"> <animateTransform attributeName="transform" type="rotate" dur="10s" keyTimes="0;.5;1" values="0 100 100;90 100 100;0 100 100" repeatCount="indefinite" additive="replace" /> </polygon> <foreignObject x="10" y="80"> <math xmlns="http://www.w3.org/1998/Math/MathML"> <mfrac> <mrow> <mo>∂</mo> <mi>S</mi> </mrow> <mrow> <mo>∂</mo> <mi>t</mi> </mrow> </mfrac> <mo>+</mo> <mi>H</mi> <mo>⁡</mo> <mfenced> <mfrac> <mrow> <mo>∂</mo> <mi>S</mi> </mrow> <mrow> <mo>∂</mo> <mi>q</mi> </mrow> </mfrac> <mi>q</mi> <mi>t</mi> </mfenced> <mo>=</mo> <mn>0</mn> </math> </foreignObject> </svg> </p> </body> </html>
MathJax4SVG способен размещать математические метки
автоматически в изображениях SVG, точно так же, как
MetaPost или Asymptote.
Для этого вводится несколько атрибутов в специальном пространстве имён "http://mathjax4svg.sf.net"
. Префикс пространства имён,
например mj4svg:
, должен быть связан с этим
идентификатором.
mj4svg:labelPlacement
<foreignObject>
включает механизм
автоматического размещения меток. Все распознаваемые значения говорят сами за
себя: "center"
, "right"
, "upperRight"
, "top"
, "upperLeft"
, "left"
, "lowerLeft"
, "bottom"
, "lowerRight"
.
mj4svg:labelX
, mj4svg:labelY
"0"
.
mj4svg:labelOffset
".3em"
.
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- $URL: svn+ssh://concyclic@svn.code.sf.net/p/mathjax4svg/code/sources/site/examples/UsageLabelsPlacement.svg $ $Id: UsageLabelsPlacement.svg 7 2014-06-06 07:16:01Z concyclic $ --> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:mj4svg="http://mathjax4svg.sf.net" version="1.1" viewBox="0 0 200 200" width="200" height="200" > <defs> <script xlink:href="MathJax4SVG.js" type="application/ecmascript"/> </defs> <rect x="50" y="50" width="100" height="100" fill="seagreen" stroke="darkslategray" stroke-width="2"/> <foreignObject mj4svg:labelX="50" mj4svg:labelY="100" mj4svg:labelPlacement="left"> <math xmlns="http://www.w3.org/1998/Math/MathML"><mtext>L</mtext></math> </foreignObject> <foreignObject mj4svg:labelX="100" mj4svg:labelY="50" mj4svg:labelPlacement="top"> <math xmlns="http://www.w3.org/1998/Math/MathML"><mtext>T</mtext></math> </foreignObject> <foreignObject mj4svg:labelX="150" mj4svg:labelY="100" mj4svg:labelPlacement="right"> <math xmlns="http://www.w3.org/1998/Math/MathML"><mtext>R</mtext></math> </foreignObject> <foreignObject mj4svg:labelX="100" mj4svg:labelY="150" mj4svg:labelPlacement="bottom"> <math xmlns="http://www.w3.org/1998/Math/MathML"><mtext>B</mtext></math> </foreignObject> <foreignObject mj4svg:labelX="50" mj4svg:labelY="50" mj4svg:labelPlacement="upperLeft"> <math xmlns="http://www.w3.org/1998/Math/MathML"><mtext>UL</mtext></math> </foreignObject> <foreignObject mj4svg:labelX="50" mj4svg:labelY="150" mj4svg:labelPlacement="lowerLeft"> <math xmlns="http://www.w3.org/1998/Math/MathML"><mtext>LL</mtext></math> </foreignObject> <foreignObject mj4svg:labelX="150" mj4svg:labelY="150" mj4svg:labelPlacement="lowerRight"> <math xmlns="http://www.w3.org/1998/Math/MathML"><mtext>LR</mtext></math> </foreignObject> <foreignObject mj4svg:labelX="150" mj4svg:labelY="50" mj4svg:labelPlacement="upperRight"> <math xmlns="http://www.w3.org/1998/Math/MathML"><mtext>UR</mtext></math> </foreignObject> <foreignObject mj4svg:labelX="100" mj4svg:labelY="100" mj4svg:labelPlacement="center"> <math xmlns="http://www.w3.org/1998/Math/MathML"><mtext>C</mtext></math> </foreignObject> </svg>