JavaScript 字符串转 SVG 元素节点 - 完整指南和示例

您可以使用 JavaScript 的 createElement 方法将字符串转换为元素节点。首先，创建一个新的 div 元素，并将字符串赋值给其 innerHTML 属性。然后，使用 querySelector 方法选择 svg 元素，并将其作为结果返回。

以下是示例代码：

var str = '<svg xmlns="http://www.w3.org/2000/svg" width="11.893ex" height="2.072ex" role="img" focusable="false" viewBox="0 -833.9 5256.7 915.9" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" style="vertical-align: -0.186ex"><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)"><g data-mml-node="math"><g data-mml-node="msup"><g data-mml-node="mi"><use data-c="1D44E" xlink:href="#MJX-TEX-I-1D44E"></use></g><g data-mml-node="mn" transform="translate(562,363) scale(0.707)"><use data-c="32" xlink:href="#MJX-TEX-N-32"></use></g></g><g data-mml-node="mo" transform="translate(1187.8,0)"><use data-c="2B" xlink:href="#MJX-TEX-N-2B"></use></g><g data-mml-node="msup" transform="translate(2188,0)"><g data-mml-node="mi"><use data-c="1D44F" xlink:href="#MJX-TEX-I-1D44F"></use></g><g data-mml-node="mn" transform="translate(462,363) scale(0.707)"><use data-c="32" xlink:href="#MJX-TEX-N-32"></use></g></g><g data-mml-node="mo" transform="translate(3331.3,0)"><use data-c="3D" xlink:href="#MJX-TEX-N-3D"></use></g><g data-mml-node="msup" transform="translate(4387.1,0)"><g data-mml-node="mi"><use data-c="1D450" xlink:href="#MJX-TEX-I-1D450"></use></g><g data-mml-node="mn" transform="translate(466,363) scale(0.707)"><use data-c="32" xlink:href="#MJX-TEX-N-32"></use></g></g></g></g></svg>';

var div = document.createElement('div');
div.innerHTML = str;
var svgElement = div.querySelector('svg');

console.log(svgElement);

这将输出转换后的 SVG 元素节点。