Как визуализировать MathJax внутри SVG ⇐ Html

[Anonymous]

У меня есть веб-сайт, на котором есть svg-изображения, которые сами содержат математические формулы, которые необходимо визуализировать с помощью MathJax. Насколько мне известно, это не поддерживается изначально (то есть путем простого помещения формул LaTeX в SVG).
В прошлом я использовал код JavaScript из этого ответа Фредди Пейджа, который довольно хорошо работал для MathJax 2. Однако теперь я хотел бы переключиться на MathJax 4 и не могу заставить этот код снова работать. Следующий код - моя лучшая попытка адаптации на данный момент. это:

Код: Выделить всё

const mathSVG = async function(latex, target) {
let mathBuffer = document.createElement("div");
document.body.appendChild(mathBuffer);

mathBuffer.textContent = latex;
await MathJax.typeset([mathBuffer]);

var svg = mathBuffer.childNodes[0];
svg.setAttribute("y", "0pt");
target.appendChild(svg);
};

async function generateTeXinSVGs() {
listOfSVGs = document.getElementsByClassName("TeXinSVG");
var i;
for (i = 0; i < listOfSVGs.length; i++) {
svgElement = listOfSVGs[i];
latex = svgElement.children[0].textContent;
svgElement.innerHTML = "";
await mathSVG("$" + latex + "$", svgElement);
}
}

Код: Выделить всё

MathJax = {
tex: {
inlineMath: {
'[+]': [
['$', '$']
]
}
},
startup: {
ready: () => {
MathJax.startup.defaultReady();
MathJax.startup.promise.then(() => {
generateTeXinSVGs();
});
}
}
};



Working MathJax parsing

An SVG with the formula $a^2+b^2=c^2$ inside it:

Failed MathJax parsing in SVG


a^2+b^2=c^2
a^2+b^2=c^2

Он работает, поскольку добавляет выходные данные MathJax в SVG, однако ничего не отображается. Насколько я вижу, (частично) проблема заключается в том, что MathJax 2 создал SVG как элемент верхнего уровня, который затем можно было бы поместить в SVG, тогда как MathJax 4 создает mjx-контейнер как элемент верхнего уровня, который, я думаю, не может быть частью SVG?
Если кто-то изменит строку

Код: Выделить всё

var svg = mathBuffer.childNodes[0];

в приведенном выше коде для

Код: Выделить всё

var svg = mathBuffer.childNodes[0].childNodes[0];

затем первая часть формулы (a^2) добавляется в SVG (и отображается, хотя и слегка обрезается). Но добавление формулы по частям не кажется мне правильным направлением.
Можете ли вы помочь мне адаптировать этот код к MathJax 4?

(или, может быть, теперь есть более эффективные способы достижения того, что я хочу в MathJax 4? Тогда я, конечно, тоже рад услышать о них)

Подробнее здесь: https://stackoverflow.com/questions/797 ... -of-an-svg