Question

我正在尝试在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！

GUESTION：
我可以通过浏览器中当前的SVG支持实现0-4的目标吗？在这种情况下，SVG 2.0会有所帮助吗？

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

Answer 1

当编码器说“浏览器”时，接下来的两个词之一就是“解决方法”。

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

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

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

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

不是很容易的解决方法，但SVG对可编辑textareas的支持非常差。 Editable textarea目前几乎没有在任何浏览器中实现，尽管规范here和here相当陈旧。 Opera 12.02提供了某种支持，但有些错误：尝试here使用向上和向下箭头键移动光标。

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

1 个答案: