在圈内包裹文字

 kikokikolove 发布于 2023-02-06 17:15

我正在使用d3绘制UML图,并希望将文本包装在用d3绘制的形状中.我已经得到了下面的代码,并找不到解决方案,使文本"适合"我的形状(见下图).

var svg =  d3.select('#svg')
    .append('svg')
        .attr('width', 500)
        .attr('height', 200);

var global = svg.append('g');

global.append('circle')
      .attr('cx', 150)
      .attr('cy', 100)
      .attr('r', 50);

global.append('text')
  .attr('x', 150)
  .attr('y', 100)
  .attr('height', 'auto')
  .attr('text-anchor', 'middle')
  .text('Text meant to fit within circle')
  .attr('fill', 'red');

结果

1 个回答
  • SVG不提供文本换行,但使用foreignObject你可以达到类似的效果.假设这radius是圆的半径,我们可以计算适合圆内的框的尺寸:

    var side = 2 * radius * Math.cos(Math.PI / 4),
        dx = radius - side / 2;
    
    var g = svg.append('g')
        .attr('transform', 'translate(' + [dx, dx] + ')');
    
    g.append("foreignObject")
        .attr("width", side)
        .attr("height", side)
        .append("xhtml:body")
        .html("Lorem ipsum dolor sit amet, ...");
    

    小组应该少量移位以使文本居中.我知道这不是所要求的,但它可能会有所帮助.我写了一个小小提琴.结果将如下所示:

    在此输入图像描述

    2023-02-06 17:18 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有