How to use foreignObject in svg.js 3.0?

Question

My older code for version 2.6.5 works.

<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"
})

My new code for version 3.0.12 doesn't.

<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"
})

The [release note] says 3.0.12 supports foreignObject. How do I use it?

Answer 1

To add to the already correct answer, you can also use SVG('<span>').attr(...) to create your html which you want to add.

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

You can even add html directly:

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