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

[Anonymous]

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

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

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







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



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



// adapted from: https://stackoverflow.com/a/52011013
// Define a function that takes LaTeX source code
// and places the resulting generated SVG in a target SVG element.
const mathSVG = async function (latex, target) {
// First create a new element to hold the initial Latex code
// and eventual MathJax generated SVG.
let mathBuffer = document.createElement("div");
document.body.appendChild(mathBuffer);

// Update the buffer with the source latex.
mathBuffer.textContent = latex;
// Get MathJax to process and typeset.
await MathJax.typeset([mathBuffer]);

var svg = mathBuffer.childNodes[0];
svg.setAttribute("y", "0pt");
// Move the generated svg from the buffer to the target element
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 в 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