Javascript 如何在HTML5中创建和插入交互式动态SVG？

我需要动态插入SVG，但是它应该是交互式的

我做的对吗？

我遇到的问题是SVG没有出现在页面上，如果我将其作为

使用，它就无法进行交互

HTML5代码

 <!-- PLANTA -->
    <main class="container-fluid d-flex align-items-center justify-content-center h-100">
       <!-- SVG -->
       <div id="info-box"></div>
       <svg id="....." xmlns:svg="http://www.w3.org/2000/svg" width="500" height="500">
            <object  data="src/data/shoppings/plants/via-parque/via_parque_P1_20160909.svg" type="image/svg+xml" src="src/data/shoppings/plants/via-parque/via_parque_P1_20160909.png" > </object>
        </svg>
    </main>

JS代码

//发出请求后立即分配处理程序，
//记住这个请求的jqxhr对象
var jqxhr=$.getJSON（“src/data/shoppings/lib/shoppings.json”，函数（数据）{
var tst=document.getElementById（“工厂src svg”）
var rect=document.createElements（tst，'object'）；
setAttribute（'type'，“image/svg+xml”）；
rect.setAttribute（'data'，“src/data/shoppings/plants/via parque/via_parque_P1_20160909.svg”）；
附加子对象（rect）；
控制台日志（tst）
})
.always（函数（）{
控制台日志（“完成”）；
})
.done（函数（）{
console.log（“第二次成功”）；
})
.fail（函数（）{
控制台日志（“错误”）；
}); 
该
不应位于
内。只需将对象附加为父div的子对象

<!-- PLANTA -->
<main id="main" class="container-fluid d-flex align-items-center justify-content-center h-100">
   <div id="info-box"></div>
   <!-- object will be inserted here -->
</main>

是一个HTML元素。不要将其包装在
标记中。而且
createlements（）
方法中的第一个参数必须是有效的XML命名空间字符串。对于SVG，这必须是
”http://www.w3.org/2000/svg“
。第二个参数必须是有效的SVG标记名。正如@ccprog已经说过的，
对象
不是有效的SVG元素。
<!-- PLANTA -->
<main id="main" class="container-fluid d-flex align-items-center justify-content-center h-100">
   <div id="info-box"></div>
   <!-- object will be inserted here -->
</main>

var main = document.getElementById("main")
var object = document.createElement('object');
object.setAttribute('type', "image/svg+xml");
object.setAttribute("width", "500");
object.setAttribute("height", "500");
object.setAttribute('data', "src/data/shoppings/plants/via-parque/via_parque_P1_20160909.svg");
main.appendChild(object);