d3.js中使用foreignObject

最新推荐文章于 2023-12-25 00:13:46 发布

X01动力装甲

最新推荐文章于 2023-12-25 00:13:46 发布

阅读量2.3k

点赞数 2

分类专栏： D3.js 文章标签： d3.js

本文为博主原创文章，未经作者允许禁止任何形式的转载。

本文链接：https://blog.csdn.net/lin5165352/article/details/101700395

版权

D3.js 专栏收录该内容

15 篇文章 3 订阅

订阅专栏

d3.js中使用foreignObject

使用svg的时候只能使用text，而且该text和html中的有差异，没有移除隐藏的属性。还好svg有个foreignObject，可以支持html的标签。
在这里插入图片描述下面是通过d3.js中添加一个div标签。需要注意的是'xhtml:div'，需要一个xhtml作为前缀。

 const fogt = g.append('foreignObject')
        .attr('x',0).attr('y',85).attr('width','180').attr('height','50')
        const t1 = fogt.append('xhtml:div')
        .style('color', "white")
        .text('12111111113')
        .style('overflow', 'hidden')
        .style('text-overflow', 'ellipsis')

在这里插入图片描述