拖拽 SVG添加節(jié)點(diǎn)，調(diào)試代碼添加成功但渲染無效果，為什么？

問題：看圖
1沒拖拽組件時(shí)
圖片描述

2拖拽組件后，在SVG中沒有渲染出組件
圖片描述

HTML SVG標(biāo)簽代碼

<template>
    <div>
      <svg class="svg-main" @drop='drop($event)' @dragover='allowDrop($event)'>
        <g class="pane-cell pane-node" transform="translate(110,15)">
          <g class="pane-scalable" transform="scale(1,1)">
            <foreignObject width="180" height="30">
              <body xmlns="http://www.w3.org/1999/xhtml">
              <div class="pane-node-content element-training">
                <span class="icon icon-shape"></span>
                <span></span>
                <span class="name">預(yù)測(cè)-1</span>
                <span class="status "></span>
              </div>
              </body>
            </foreignObject>
          </g>
        </g>
      </svg>
    </div>
</template>

克隆節(jié)點(diǎn)并插入svg標(biāo)簽中的代碼

export default {
    methods: {
      drop:function(event){
        event.preventDefault();
        var datae = event.dataTransfer.getData("mlNodeid");
        var item = document.getElementById(datae).cloneNode(true);
        var div=document.createElement('div');div.setAttribute('class','pane-node-content element-training');div.appendChild(item);
        var body=document.createElement('body');body.setAttribute('xmlns','http://www.w3.org/1999/xhtml');body.appendChild(div);
        var Object=document.createElement('foreignObject');Object.setAttribute('width','180');Object.setAttribute('height',30);Object.appendChild(body);
        var g2=document.createElement('g');g2.setAttribute('transform','scale(1,1)');g2.setAttribute('class','pane-scalable');g2.appendChild(Object);
        var g=document.createElement('g');g.setAttribute('transform','translate(110,50)');g.setAttribute('class','pane-cell pane-node');g.appendChild(g2);
        event.target.appendChild(g);
      },
      allowDrop:function(event){//阻止冒泡
        event.preventDefault();
      }
    }
  };

回答

編輯回答

耍太極

svg中添加圖形節(jié)點(diǎn)，查看html,你會(huì)發(fā)現(xiàn)dom節(jié)點(diǎn)更新了，但圖形沒有變化。為什么?你要知道,svg是一個(gè)置換元素，置換元素是什么，你可以看看這篇文章,簡(jiǎn)單來說，svg和div這些dom元素這些不一樣，其表現(xiàn)由其內(nèi)部繪制元素決定，就像置換元素img一樣，其表現(xiàn)由其屬性src決定。另外你還需要因?yàn)檫@樣,svg中的繪制元素，是不支持事件委托的。

2017年7月14日 20:03

編輯回答

涼心人

export default {
    methods: {
      drop:function(event){
        event.preventDefault();
        var datae = event.dataTransfer.getData("mlNodeid");
        var item = document.getElementById(datae).cloneNode(true);
        var div=document.createElement('div');div.setAttribute('class','pane-node-content element-training');div.appendChild(item);
        var body=document.createElement('body');body.setAttribute('xmlns','http://www.w3.org/1999/xhtml');body.appendChild(div);
        var Object=document.createElementNS("http://www.w3.org/2000/svg",'foreignObject');Object.setAttribute('width','180');Object.setAttribute('height',30);Object.appendChild(body);
        var g2=document.createElementNS( "http://www.w3.org/2000/svg", "g" );g2.setAttribute('transform','scale(1,1)');g2.setAttribute('class','pane-scalable');g2.appendChild(Object);
        var g=document.createElementNS( "http://www.w3.org/2000/svg", "g" );g.setAttribute('transform','translate(110,50)');g.setAttribute('class','pane-cell pane-node');g.appendChild(g2);

        event.target.appendChild(g);
      },
      allowDrop:function(event){//阻止冒泡
        event.preventDefault();
      }
    }
  };

2018年2月23日 01:44