HTML SVG标签内嵌本地SVG的object标签无法显示求助

核心问题分析 #

SVG内部的object元素需要遵循SVG坐标系统规则，直接添加时容易因缺少定位属性（x/y）或SVG命名空间不匹配导致渲染失效；foreignObject则需要正确配置宽高、定位及内部HTML容器，否则同样无法正常显示。

解决方案1：给object添加SVG命名空间并设置定位 #

你通过DOMParser解析的是text/html文档，但SVG内的元素必须使用SVG命名空间创建，否则会和SVG上下文不兼容：

// 定义SVG命名空间
const svgNs = "http://www.w3.org/2000/svg";
// 创建SVG命名空间的object元素
$objectEl = $trdoc.createElementNS(svgNs, "object");
$objectEl.setAttribute("src", "gas_detector.svg");
$objectEl.setAttribute("type", "image/svg+xml");
$objectEl.setAttribute("width", "100");
$objectEl.setAttribute("height", "100");
// 必须设置x/y属性，定位到目标房间位置
$objectEl.setAttribute("x", (+$rx) + 5);
$objectEl.setAttribute("y", (+$ry) + 5);

$main_svg.appendChild($objectEl);

解决方案2：改用image标签替代object（更简洁可靠） #

SVG内嵌入外部SVG，使用<image>标签比object更适配，无需额外处理命名空间问题：

const svgNs = "http://www.w3.org/2000/svg";
// 创建SVG命名空间的image元素
$imageEl = $trdoc.createElementNS(svgNs, "image");
$imageEl.setAttribute("href", "gas_detector.svg");
$imageEl.setAttribute("width", "100");
$imageEl.setAttribute("height", "100");
$imageEl.setAttribute("x", (+$rx) + 5);
$imageEl.setAttribute("y", (+$ry) + 5);

$main_svg.appendChild($imageEl);

解决方案3：正确配置foreignObject #

如果必须使用foreignObject，需为它设置定位、宽高，且内部object要放在HTML命名空间的容器中：

const svgNs = "http://www.w3.org/2000/svg";
const htmlNs = "http://www.w3.org/1999/xhtml";

// 创建SVG命名空间的foreignObject
$created_image = $trdoc.createElementNS(svgNs, "foreignObject");
$created_image.setAttribute("x", (+$rx) + 5);
$created_image.setAttribute("y", (+$ry) + 5);
$created_image.setAttribute("width", "100");
$created_image.setAttribute("height", "100");

// 创建HTML命名空间的div容器
const div = $trdoc.createElementNS(htmlNs, "div");
div.style.width = "100px";
div.style.height = "100px";

// 创建HTML命名空间的object元素
$objectEl = $trdoc.createElementNS(htmlNs, "object");
$objectEl.setAttribute("src", "gas_detector.svg");
$objectEl.setAttribute("type", "image/svg+xml");
$objectEl.style.width = "100%";
$objectEl.style.height = "100%";

div.appendChild($objectEl);
$created_image.appendChild(div);
$main_svg.appendChild($created_image);

额外注意事项 #

• 确认gas_detector.svg文件路径正确，浏览器控制台无404错误
• 若外部SVG自带viewBox，可省略宽高设置，通过preserveAspectRatio控制缩放比例
• 避免循环中重复append同一个元素（你的代码仅创建了一个object，多次append只会移动元素位置，不会复制）

内容的提问来源于stack exchange，提问作者Akshay Ram