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

我的旧版本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。如何使用它？

只要尝试使用add将foreignObject用作容器即可。并首先创建一个跨度元素。现在它起作用了

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

---

只需尝试使用add将foreignObject用作容器。并首先创建一个跨度元素。现在它起作用了

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

---

要添加到已经正确的答案中，还可以使用SVG.attr。。。创建要添加的html

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

您甚至可以直接添加html：

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

---

要添加到已经正确的答案中，还可以使用SVG.attr。。。创建要添加的html

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

您甚至可以直接添加html：

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