Safari 中的插入符问题与可编辑的 SVG

Question

我正在使用 contenteditable="true" 编辑 SVG 中的文本。在除 Safari 之外的所有浏览器中它都有效。 Safari 有插入符号位置的问题：

示例代码：

[contenteditable]{
  -webkit-user-select:text;
  user-select:text;
}

<div contenteditable="true"  style="background: #ffe7e7">
  <svg style="display:inline-block">
    <text id="text" y="2em">Hello world</text>
  </svg>
</div>

Answer 1

我过去也遇到过类似的问题。不幸的是，答案是承认 safari 有时会有特殊问题，我不得不在支持 safari 或重新考虑方法之间做出决定。因为我不想放弃 saffari，所以我完全重新考虑了这种布局的必要性，但是 YMMV。您可以找到与 contenteditable here.

相关的 Safari 问题的问题跟踪器

Answer 2

如果您的 Safari 浏览器是最新的 (contenteditable is fully supported from 3.1.), most likely your problem is that webkit and safari are very buggy with contenteditable. Here are Safari's bugs.

Answer 3

我们已经通过实施我们自己的插入符号解决了这个问题。系统插入符被样式规则隐藏。

Safari 中的插入符问题与可编辑的 SVG

Caret issue in Safari with contenteditable SVG

html

safari

svg