如何在svg里编辑文字呢(类似于input)?

Mando
  • 199
最近在使用百度脑图时,发现是用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>
回复
阅读 6.6k
2 个回答
鸿则
  • 2.4k
✓ 已被采纳

使用foreignObject可以嵌入html元素

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <foreignObject x="20" y="20" width="160" height="160">
    <input type="text" style="width: 100px;" />
  </foreignObject>
</svg>

clipboard.png

你可以加个隐藏层,属性设置为隐藏,text标签试试

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏