javascript - 允许在 Angular 中编辑 SVG 文本？

Question

从 1.3.1 开始，AngularJS 非常擅长 SVG 的编写。大多数交互是 1. 数据库或某种形式提供数据 -> Angular 将节点推送到 SVG 中。现在我希望能够不需要单独的表单来与数据交互，而是通过单击其绘制的 SVG 文本元素直接更改某些变量的值。我尝试直接在文本节点上使用 contenteditable，但是没用。可能吗？

Answer 1

我写了一个指令:http://jsfiddle.net/michaschwab/68dtgcu3/1/而不是例如 <text x="20" y="70" fill="red">{{foo}}</text>你使用这些额外的标签:

<text x="20" y="70" fill="red" ng-model="foo" content-editable>{{foo}}</text>

这将自动在您的文本节点顶部添加一个 contentEditable div，因此您看不到它。更改新的 div 将允许您直接编辑模型。有一些小错误:

1. 文本节点的样式没有完全复制，所以额外的 div 是可见的。该位置还必须在窗口调整大小等情况下更新。
2. 有一些 $sce 错误我没有处理。 this似乎是解决该问题的有用链接。

希望对您有所帮助!