MathJax для SVG

Содержание
Описание
Загрузка
Использование
Внутри отдельных документов SVG
Внутри документов (X)HTML, включающих SVG через элементы <object>
Внутри документов (X)HTML, непосредственно включающих SVG
Размещение меток
Альтернативный URL MathJax
Состояние поддержки браузеров
Автор

Имеется перевод этой страницы на английский язык.

Описание

Скрипт MathJax4SVG.js обеспечивает поддержку для MathJax в документах SVG.

В настоящее время MathJax отображает MathML лишь в документах (X)HTML. Скрипт делает простой трюк: он заворачивает MathML в XHTML документ и вставляет элемент <script>, ссылающийся на скрипт MathJax, в раздел <head> этого документа XHTML.

Имеется несколько возможностей использовать SVG в веб-страницах:

Два последних способа исключают исполнение скриптов, и поэтому MathJax4SVG в них неприменим. 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg [
<!ENTITY it "&#x2062;">
<!ENTITY leqslant "&#x2A7D;">
]>
<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>&it;</mo>
				<mi>y</mi>
			</msqrt>
			<mo>&leqslant;</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"?>
<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"?>
<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"?>
<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>&#x2061;</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. Для этого вводится несколько атрибутов в специальном пространстве имён "https://github.com/urbic/mathjax4svg". Префикс пространства имён, например 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"?>
<svg
	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink"
	xmlns:mj4svg="https://github.com/urbic/mathjax4svg"
	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>

По умолчанию MathJax4SVG использует "https://cdn.jsdelivr.net/npm/mathjax@3/es5/mml-chtml.js" как MathJax URL. Можно указать другой URL как значение атрибута mj4svg:mjURL (в пространстве имён "https://github.com/urbic/mathjax4svg"). Атрибут задаётся в элементе документа SVG.

✓✓✓✓??

Антон Швец