在svg中的可编辑字段

Question

我正在尝试使用外部对象中的文本框为svg元素内的标签提供编辑选项。 如果文本框中写入的文本大于文本框的宽度，则给定的文本会溢出文本框字段外部。

<svg>
  <foreignObject x="30" y="15" width="200" height="40" class="editable" style="cursor: default;">
   <div xmlns="http://www.w3.org/1999/xhtml">
  <input type="text" class="editable-div" style="width:120px;">
  </div>
  </foreignObject>
  </svg>

sample