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

【问题标题】：How to create and insert an Interactive Dynamic SVG in HTML5?如何在 HTML5 中创建和插入交互式动态 SVG？
【发布时间】：2018-12-02 03:28:43
【问题描述】：

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

我做对了吗？

我遇到的问题是 SVG 没有出现在页面上，如果我将其用作 <image>，它不会获得 INTERACTIVE。

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>

【问题讨论】：

<object> 是一个 HTML 元素。不要将其包装在 <svg> 标记中。
creatElementNS() 方法中的第一个参数也必须是有效的 XML 命名空间字符串。对于 SVG，必须是 "http://www.w3.org/2000/svg"。第二个参数必须是有效的 SVG 标记名称。正如@ccprog 已经说过的，object 不是有效的 SVG 元素。

标签： javascript html svg jquery-svg

【解决方案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);

【讨论】：