极客观点
研发管理
HarmonyOS
问题：看图
1没拖拽组件时
2拖拽组件后，在SVG中没有渲染出组件
HTML SVG标签代码
<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">预测-1</span>
<span class="status "></span>
</div>
</body>
</foreignObject>
</g>
</g>
</svg>
</div>
</template>克隆节点并插入svg标签中的代码
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中添加图形节点，查看html,你会发现dom节点更新了，但图形没有变化。为什么?你要知道,svg是一个置换元素，置换元素是什么，你可以看看这篇文章,简单来说，svg和div这些dom元素这些不一样，其表现由其内部绘制元素决定，就像置换元素img一样，其表现由其属性src决定。另外你还需要因为这样,svg中的绘制元素，是不支持事件委托的。