12赞
368
当前位置:  开发笔记 > 编程语言 > 正文

如何根据文本宽度动态调整SVG矩形的大小?

如何解决《如何根据文本宽度动态调整SVG矩形的大小?》经验,为你挑选了1个好方法。

在SVG图中,我创建了由矩形和一些文本组成的节点元素.文本量可能会有很大差异,因此我想根据文本的宽度设置rect的宽度.

这是使用D3.js创建矩形(使用固定的宽度和高度值):

var rects = nodeEnter.append("rect")
    .attr("width", rectW)
    .attr("height", rectH);

后跟文本元素:

var nodeText = nodeEnter.append("text")
    .attr("class", "node-text")
    .attr("y", rectH / 2)
    .attr("dy", ".35em")
    .text(function (d) {
        return d.data.name;
    });
nodeText // The bounding box is valid not before the node addition happened actually.
    .attr("x", function (d) {
        return (rectW - this.getBBox().width) / 2;
    });

如您所见,目前我将文本置于可用空间中心.然后我尝试根据文本设置rects的宽度,但我从来没有同时获得rect元素和text HTML元素(对于getBBox()).这是我的一次尝试:

rects.attr("width",
        d => this.getBBox().width + 20
    );

但显然this是错的,因为它指的rects不是文本.

这里的正确方法是什么?



1> enxaneta..:

我会getComputedTextLength用来衡量文字.我不知道在D3.js中是否有相同的内容我的答案是使用普通的Javascript并且假设rect和文本中心是{x:50,y:25}并且你正在使用text{dominant-baseline:middle;text-anchor:middle;}

let text_length = txt.getComputedTextLength();

rct.setAttributeNS(null,"width",text_length )
rct.setAttributeNS(null,"x",(50 - text_length/2) )
svg{border:1px solid}
text{dominant-baseline:middle;text-anchor:middle;}

  
  Test text
推荐阅读
devbox
akun
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有 京ICP备19059560号-4