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

Question

我需要动态插入 SVG，但它应该是INTERACTIVE ...

我在做正确的事吗？

我遇到的问题是 SVG 没有出现在页面上，如果我使用它，因为<image>它没有交互。

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代码

    <script>


    // Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.getJSON( "src/data/shoppings/lib/shoppings.json", function(data) {
    var tst  = document.getElementById("plant-src-svg")
    var rect = document.createElementNS(tst,'object');
    rect.setAttribute('type', "image/svg+xml");
    rect.setAttribute('data', "src/data/shoppings/plants/via-parque/via_parque_P1_20160909.svg");
    tst.appendChild(rect);
    console.log(tst)

})
.always(function() {
    console.log( "complete" );
  })
  .done(function() {
    console.log( "second success" );
  })
  .fail(function() {
    console.log( "error" );
  }); 




        </script>

Answer 1

<object>不应该在<svg>. 只需将您的对象附加为父 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>

JS：

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);