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将国外对象用作容器。并首先创建一个SPAN元素。现在可以了。

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

Answer 2

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

SVG('<span>').attr(...)

您甚至可以直接添加html：

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

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

2 个答案: