SVG中的多行可编辑文本区域答案

【问题标题】：Multiline editable textarea in SVGSVG中的多行可编辑文本区域
【发布时间】：2014-06-28 03:07:47
【问题描述】：

我正在尝试在 SVG 中实现多行可编辑文本字段。我在http://jsfiddle.net/ca4d3/ 中有以下代码：

<svg width="1000" height="1000" overflow="scroll">
  <g transform="rotate(5)">
    <rect width="300" height="400" fill="#22DD22" fill-opacity="0.5"/>
  </g>
  <foreignObject x="10" y="10" overflow="visible" width="10000" height="10000"
  requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
    <p style="display:table-cell;padding:10px;border:1px solid red;
    background-color:white;opacity:0.5;font-family:Verdana;
    font-size:20px;white-space: pre;
    word-wrap: normal; overflow: visible; overflow-y: visible;
    overflow-x:visible;" contentEditable="true"
    xmlns="http://www.w3.org/1999/xhtml">

    Write here some text.
    Be smart and select some word.
    If you wanna be really COOL,
    paste here something cool!

    </p>
  </foreignObject>
</svg>

在最新的 Chrome、Safari 和 Firefox 中，代码以某种方式工作，但在 Opera 和 IE 9 中则不行。

我们的目标是：
0) 适用于最新的 Chrome、Safari、Firefox、Opera 和 IE，如果可能的话，适用于某些键盘。
1) 保留空格并且文本仅在换行符上换行（适用于 Chrome、Safari 和 Firefox，但不适用于 Opera 和 IE 9 *）。
2) 文本字段是可编辑的（与 html 中的 textareas 和 contenteditable p 元素一样可靠和稳定）并且高度和宽度被扩展以适合文本（适用于 Chrome、Safari 和 Firefox，但不适用于 Opera 和 IE 9 *） .
3) Texfield 可以在保持文本可编辑性的同时进行转换（旋转、倾斜、翻译）（经过测试的旋转，但不适用于任何浏览器 *）。

编辑：Foreignobject rotation 适用于 Firefox 15.0.1，但不适用于 Safari 5.1.7 (6534.57.2)、Chrome 22.0.1229.79、Opera 12.02、IE 9。在 Mac OS X 10.6.8 上测试。

4) 文本字段可以被剪切和屏蔽，但不一定保持文本可编辑性（尚未测试）。

*) 使用上面的代码

这些都可以用flash实现，但是flash问题太严重了，不适合我的目的（代码每小改一次，都得用flex重新编译，速度慢，字体大小有限制，跟踪技术是面向像素的，与 em 大小等无关）并且跨平台仍然存在差异。我想尝试一下 SVG！

猜想：
我可以通过浏览器中当前的 SVG 支持来实现我的目标 0-4 吗？在这种情况下，SVG 2.0 会提供一些帮助吗？

编辑：将 display:table 更改为 display:table-cell （并添加了新的 jsfiddle），因为 display:table 在第一个文本行上按下箭头时使该字段失去焦点。

【问题讨论】：

IE 不支持foreignObject。我怀疑这使得在 IE 中支持这一点无法实现。

标签： svg textarea multiline

【解决方案1】：

似乎当 coder 说“浏览器”时，接下来的两个词之一是“workaround”。

因此一种可能的解决方法是使用 contenteditable p, place it on top of svg 并对此进行转换。

如果某些 svg 元素必须在 contenteditable p 之上，那么我们必须在顶部再添加一个 svg。

这个组合可以通过phantomjs渲染成png/pdf。

如果我们想要 svg 蒙版、剪辑或过滤器，它们在 html-elements 上的任何浏览器都不支持。因此，为了使它们工作，我们必须将可竞争 p 上的文本转换为路径（使用来自服务器的字体数据或使用 this when it is more complete 获取路径数据客户端）并屏蔽或剪辑这些。

解决方法不是很简单，但 SVG 对可编辑文本区域的支持很差。 Editable textarea 目前几乎没有在任何浏览器中实现，尽管规范 here 和 here 相当陈旧。 Opera 12.02 有一些支持，但有问题：尝试here 使用向上和向下箭头键移动光标。

【讨论】：