如何在 svg.js 3.0 中使用 foreignObject？

Question

我的 2.6.5 版旧代码有效。

<div id="drawing"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.js"></script>
<script src="/nbextensions/google.colab/svg.foreignobject.js"></script>
<script>
var draw = SVG('drawing').size('100%', 100)

var fobj = draw.foreignObject(100,100).attr({id: 'fobj'})
fobj.appendChild("span", {
  id: 'myspan', innerText: "Hello"
})

我的 3.0.12 版新代码没有。

<div id='drawing'></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.12/svg.js"></script>
<script>
var draw = SVG().addTo('#drawing').size('100%', 100)

var fobj = draw.foreignObject(100,100)
fobj.appendChild("span", {
  id: 'myspan', innerText: "Hello"
})

[发行说明] 说 3.0.12 支持 foreignObject。如何使用？

Answer 1

尝试使用 add 将 foreignObject 用作容器。并首先创建一个 SPAN 元素。现在可以了。

var fobj = draw.foreignObject(100,100)
var span = document.createElement('span')
span.innerText = 'Hello'
fobj.add(span)

Answer 2

要添加到已经正确的答案中，您还可以使用 SVG('<span>').attr(...) 创建您要添加的 html。

const fObj = canvas.foreignObject(100, 100)
fObj.add(SVG('<span>').attr(...))

你甚至可以直接添加html：

fObj.add('<span id="bla">Hello</span>')

如何在 svg.js 3.0 中使用 foreignObject？

How to use foreignObject in svg.js 3.0?

svg.js