上一篇: html5 – 如何使用jquery mobile... 下一篇:带有Canvas的HTML5 / JavaScript...

html5 – 在没有foreignobject的情况下模拟SVG中的contenteditable

HTML5 发布时间：2022-04-26 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了html5 – 在没有foreignobject的情况下模拟SVG中的contenteditable，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我编写了一个Web应用程序,用户可以使用文本创建svg元素.我想模拟svg元素中的contenteditable元素,以便用户可以动态编辑svg元素的内容.也就是说,当用户单击其中一个元素时,应显示光标以便可以编辑文本.我不想使用foreignobject来实现这一点,因为IE不支持.我在网上找不到任何有用的东西,所以有什么方法可以做到这一点吗？

编辑：澄清一下,这是一个例子：

<svg>
    <rect width="192" height="192" style="stroke-width: 3; fill:red"></rect>
    <text x="30" y="20">A sample text</text><!-- when the user clicks on this,it should be editable-->
</svg>

解决方法

这是一个例子：

<div contenteditable="true">
    <svg>
        <circle cx="10" cy="10" r="5" fill="green" />
        <text y="2em">Hello world</text>
    </svg>
</div>

http://jsfiddle.net/ZEAwB/

适用于Opera 18,Chrome 33,Firefox(夜间)28和IE9.可能也适用于早期版本的Opera,Chrome和Firefox,但不太确定它有多远.