为什么 JSDOM 在生成外层 HTML 时将 xmlns="" 附加到 SVG <g> 节点?

问题描述

我正在编写一个脚本,该脚本将 SVG 文件拆分为单独的图层,用作纹理。这些层都在彼此之上,因此它基本上将项目拆分为单独的图像。

我至少花了半个小时才弄明白为什么图片没有显示,问题是 xmlns 属性

<g xmlns=""> ... rest of the image ... </g>

我写了一个简单的代码来准确复制我的脚本在文档操作方面采取的步骤。

这是一个仅需要您拥有 jsdom 包的复制品:

import JSDOM_m from "jsdom";
/**
 * @typedef {import("JSDOM")} JSDOM_t
 * */
/** @type {JSDOM_t} **/
const JSDOM = JSDOM_m;

const dom = new JSDOM.JSDOM("");
const DOMParser = dom.window.DOMParser;
const parser = new DOMParser();

const document = parser.parseFromString(`<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg"></svg>`,"image/svg+xml");
const node_svg_1 = document.getElementsByTagName("svg")[0];

node_svg_1.setAttribute("width","128");
node_svg_1.setAttribute("height","128");
node_svg_1.setAttribute("viewBox","0 0 33.866666 33.866668");
node_svg_1.setAttribute("version","1.1");
node_svg_1.setAttribute("id","svg8");
const node_g_2 = document.createElement("g");
node_g_2.setAttribute("id","layer10");
node_g_2.setAttribute("style","display:none");
node_svg_1.appendChild(node_g_2);
const node_path_3 = document.createElement("path");
node_path_3.setAttribute("style","fill:#5dd05d;fill-opacity:1;stroke:#000000;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1");
node_path_3.setAttribute("d","M 9.1281252,-0.00222895 7.4414064,4.1010418 7.209896,11.1125 l 0.2315104,3.439584 0.5953126,3.604948 3.075781,4.630208 3.770313,2.745052 4.861719,0.628386 3.505729,-0.529167 3.439583,-0.165365 3.274219,-0.727604 3.903639,0.132289 V 9.301758 L 29.434897,8.8635419 26.52448,9.2604169 24.275521,9.0619794 22.952605,8.0697919 22.754167,6.6145835 23.614063,4.2333334 23.812501,2.1166668 24.407813,0.33072928 24.738542,-0.06614573");
node_path_3.setAttribute("id","path1107");
node_g_2.appendChild(node_path_3);

console.log(document.documentElement.outerHTML);

结果再次包含 xmlns=""。为什么会发生这种情况以及如何阻止它?

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)