允许 SVG 文本在角度中可编辑

Allow SVG Text to be editable in Angular?

本文关键字：编辑 SVG 文本 允许      更新时间：2023-09-26

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

我写了一个指令：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>

这将在文本节点的顶部自动添加一个 contentEditablediv，这样你就看不到它了。更改该新div 将允许您直接编辑模型。有一些小错误：

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

希望对您有所帮助！

相关文章：