在HTML SVG标记中不显示带有本地SVG的 object标记

Question

我对前端有点陌生，这个SVG似乎比其他的要困难得多!我通过JS在SVG标签中添加了一个对象，下面是它的样子;

对象未显示

无论我做什么，对象总是在角落里显示为0x0我在这里错过了什么?任何帮助都是感激的!

下面是JS函数:

success: function (fdataf) {
$trdoc = new DOMParser().parseFromString(fdataf, 'text/html');

$rooms = $trdoc.getElementsByClassName("Room");
$main_svg = $trdoc.getElementById("main_svg");
// $created_image = $trdoc.createElement("svg");
// $created_image.setAttribute("width", "23");
// $created_image.setAttribute("height", "23");
// $created_image.setAttribute("id", "NEWSENSOR");
//
// $created_image.setAttribute("viewBox", "85.5 51.0 4630.1 4565.1");
$objectEl = $trdoc.createElement("object");
$objectEl.setAttribute("src", "gas_detector.svg");
$objectEl.setAttribute("type", "image/svg+xml");
$objectEl.setAttribute("width", "100");
$objectEl.setAttribute("height", "100");
$objectEl.setAttribute("Content-type", "image/svg+xml");
// $created_image.appendChild($objectEl);
for (let i = 0; i < $rooms.length; i++) {
$roomName = $rooms[i].getAttribute("id");
$rx = $rooms[i].getAttribute("x");
$ry = $rooms[i].getAttribute("y");
console.log($roomName);
if ($roomName == 'Room102'){
// $created_image.setAttribute("x", +($rx) + 5);
// $created_image.setAttribute("y", +($ry) + 5);
// $created_image.setAttribute("id", "NEWSENSOR");
console.log(typeof (+($rx)));
$main_svg.appendChild($objectEl);
}
}
console.log("AREWE?")
console.log(new XMLSerializer().serializeToString($trdoc));
document.getElementById("floorView").innerHTML = new XMLSerializer().serializeToString($trdoc);
document.getElementById(calling_floor).style.fill = "#0275d8";
}
});}

尝试将对象嵌入到一个foreignObject中，但是没有帮助:

$created_image = $trdoc.createElement("foreignObject");
// $created_image.setAttribute("width", "23");
// $created_image.setAttribute("height", "23");
// $created_image.setAttribute("id", "NEWSENSOR");
//
// $created_image.setAttribute("viewBox", "85.5 51.0 4630.1 4565.1");
$objectEl = $trdoc.createElement("object");
$objectEl.setAttribute("src", "gas_detector.svg");
$objectEl.setAttribute("type", "image/svg+xml");
$objectEl.setAttribute("width", "100");
$objectEl.setAttribute("height", "100");
$objectEl.setAttribute("Content-type", "image/svg+xml");
$created_image.appendChild($objectEl);

Answer 1

我不确定我做了什么，但添加了这些属性和对象显示svg和png:

$created_image = $trdoc.createElement("foreignObject");
$created_image.setAttribute("width", "26");
$created_image.setAttribute("height", "26");
$created_image.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
$created_image.setAttribute("xmlns:xhtml", "http://www.w3.org/1999/xhtml");
// $created_image.setAttribute("id", "NEWSENSOR");
//
// $created_image.setAttribute("viewBox", "85.5 51.0 4630.1 4565.1");
$objectEl = $trdoc.createElement("object");
$objectEl.setAttribute("data", "sensor.png");
$objectEl.setAttribute("width", "100%");
$objectEl.setAttribute("height", "100%");