Question

我有一个文本标签，该标签要通过JS脚本添加到SVG中，并希望使该文本可编辑。

在StackOverflow上找到了两个解决方案：

创建一个CSS类并将其应用于我的SVG文本元素。至少在Safari中，它可以完美运行，但MDN https://developer.mozilla.org/en-US/docs/Web/CSS/user-modify不建议这样做这实际上是某人的答案，很遗憾，我不记得是谁：
```
.editable {
    font-size: 0.3em;
    user-modify: read-write;
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
}
```
将svg包装在一个内容可编辑的div中（由Erik给出答案）。这也可以，但是至少在Safari中会导致错误的光标行为。

<div contenteditable="true">
  <svg id="svgArea" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  </svg>
</div>

JS部分

function foo(x, y, w, h) {
  var rect, group;
  var svgPlace = document.getElementById('svgArea');
  var xmlns = "http://www.w3.org/2000/svg";
  group = document.createElementNS(xmlns, 'g');
  svgPlace.appendChild(group);

  var txtElem = document.createElementNS(xmlns, 'text');
  txtElem.setAttributeNS(null, 'x', x);
  txtElem.setAttributeNS(null, 'y', y * 1.25);
  txtElem.setAttributeNS(null, 'fill', 'LightBlue');
  txtElem.setAttributeNS(null, 'contentEditable', true); //does nothing!
  txtElem.setAttributeNS(null, 'class', 'editable'); //this is the best working option at the moment
  var txtVal = document.createTextNode('test');
  txtElem.appendChild(txtVal);
  group.appendChild(txtElem);
}

如果可能的话，我希望能够将contentEditable设置为属性。但最重要的是，使SVG文本可编辑的最佳方法是什么？

Answer 1

@Raymond评论是正确的答案，但是由于您仍然有问题，我写下了一个例子。

document.getElementById("svgWrapper").contentEditable = "true";

<div id="svgWrapper">
  <svg id="svgArea" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  </svg>
</div>

Answer 2

我最终通过在外来对象中放置一个输入标签来解决这个问题，该对象被添加到一个 SVG 组中。这适用于 Safari，所以我想把它贴在这里，以防其他人遇到同样的问题。

<svg>
<g>
<foreignobject>
<input></input>
</foreignobject>
</g>
</svg>

如果需要使用JS添加：

function addSvg(x, y, w, h) {
var rect, group;
var svgPlace = document.getElementById('svgArea');
var xmlns = "http://www.w3.org/2000/svg";
group = document.createElementNS(xmlns, 'g');
svgPlace.appendChild(group);

// solution
let foreigner = document.createElementNS(xmlns, "foreignObject");
foreigner.setAttributeNS(null, "x", x);
foreigner.setAttributeNS(null, "y", y);
foreigner.setAttributeNS(null, "width", w);
foreigner.setAttributeNS(null, "height", h);
group.appendChild(foreigner);

let txt = document.createElement('input');
foreigner.appendChild(txt);

}

如何使SVG文本可编辑？

2 个答案: