Question

我编写了一个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>

Answer 1

以下是一个例子：

<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，但不太确定它有多久。

Answer 2

@Erik Dalhström 的解决方案似乎没有解决这个问题：他希望能够在 SVG 对象上（“内部”）编辑文本内容，如示例所示。在 Firefox 上，Erik 的代码确实使文本可编辑，但在 10 x 10 圆圈下方，而不是在 SVG 空间内。

我在 https://github.com/artursapek/mondrian/issues/12 找到了一个解决方法：

当用户点击 SVG <text> 元素时，将 HTML 命名空间中最近祖先的 contenteditable 属性设置为 true （例如document.body.contentEditable = true;），然后使 SVG <text> 元素可选（例如svgTextElement.style.webkitUserSelect = 'text';）。

当用户完成编辑文本时（例如通过点击画布）将祖先的 contentEditable 属性设置回 false。

我还没有尝试过，希望有人报告它是否有效。我们不应该等待 CSS 2.0 来获得这个非常需要的功能。

在没有外来对象的情况下模拟SVG中的contenteditable

2 个答案: