2

我正在尝试在 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 旋转适用于 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 在第一个文本行上按下箭头时使该字段失去焦点。

4

1 回答 1

3

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

因此，一种可能的解决方法是使用 contenteditable p，将其放在 svg 之上并对其进行转换。

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

这种组合可以通过 phantomjs 渲染为 png/pdf。

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

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

于 2012-10-08T21:36:22.077 回答