极客观点
项目管理
HarmonyOS
最近在使用百度脑图时,发现是用svg写的,我就自己学习了一下svg,百度脑图块双击编辑时,可以看到input的效果
svg好像不能加入input标签,在线查看源码时也没发现那里发生了变化!
我想在svg多个思维导图块里实现一个双击编辑文字的功能
不知道是怎么实现的,希望哪位大神可以给一个实现的思路~~~~ 感谢~
小demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双击时出现类似编辑框的input效果</title>
<style>
*{
margin: 0;
padding: 0;
}
body,html,svg{
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
<circle id="dragDiv" cx="200" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
<rect x="300" y="200" width="150" height="150"
style="fill:green;stroke:pink;stroke-width:5;opacity:0.5"/>
<circle cx="400" cy="50" r="40" stroke="black" stroke-width="2" fill="green" />
<foreignObject x="20" y="200" width="160" height="160" fill="green" style="background:blue;fill:green;border:1px solid #000;stroke:pink;stroke-width:5;opacity:0.5">
<input type="text" style="width: 100px;" />
</foreignObject>
</svg>
</body>
</html>
<g id="minder_node11" transform="matrix( 1 0 0 1 327 -87 )">
<g id="node_expander11" transform="translate( -16 0 )" style="cursor: pointer;">
<path id="kity_path_263" fill="white" stroke="gray" d="M6,0A6,6,0,1,1,-6,0A6,6,0,1,1,6,0"></path>
<path id="kity_path_264" fill="none" stroke="gray" d="M-4.5,0L4.5,0"></path>
</g>
<path id="node_outline12" fill="white" stroke="white"
d="M-5,-11h71a5,5,0,0,1,5,5v12a5,5,0,0,1,-5,5h-71a5,5,0,0,1,-5,-5v-12a5,5,0,0,1,5,-5z"></path>
<g id="node_text12" transform="translate( 0 -1.7999999999999998 )" fill="black"><text id="kity_text_127"
text-rendering="inherit" dominant-baseline="text-before-edge" font-size="12" dy="0" y="-6">迭代器wqe</text>
</g>
</g>
html5
使用
foreignObject可以嵌入html元素