将文本包裹在圆圈内 [英] Wrap text within circle

问题描述

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

var svg = d3.select('#svg').append('svg').attr('宽度', 500).attr('身高', 200);var global = svg.append('g');global.append('圆圈').attr('cx', 150).attr('cy', 100).attr('r', 50);global.append('文本').attr('x', 150).attr('y', 100).attr('高度', '自动').attr('文本锚', '中间').text('文字要适合圆圈').attr('填充', '红色');

解决方案

这是我能做的最好的事情.

我想在 SVG 中将文本居中并包裹在圆形或矩形内.无论文本长度如何，文本都应保持居中(水平/垂直).

svg {宽度:600px；高度:200px；背景颜色:黄色；}.圆圈 {背景颜色:蓝色；高度:100%；边界半径:100%；文本对齐:居中；行高:200px；字体大小:30px；}.circle 跨度{行高:正常；显示:内联块；垂直对齐:中间；白颜色;文本阴影:1px 1px 2px rgba(0, 0, 0, 0.8);}

</foreignObject><foreignObject width="200" height="200" x="300" y="100" transform="translate(-100,-100)"><div class="circle"><span>这是一个段落</span>

</foreignObject><foreignObject width="200" height="200" x="500" y="100" transform="translate(-100,-100)"><div class="circle"><span>这是一个需要自动换行的段落</span>

</foreignObject></svg>

transform 属性不是强制性的，我使用了 translate(-r, -r) 以便foreignObject 的 (x,y) 就像 SVG 圆的 (cx, cy) 和宽度，高度 = 2*r，半径为 r.

我这样做是为了将其用作 D3 力布局中的节点.我留下作为练习，将这段代码转换成 javascript D3 的风格.

I'm using d3 to draw a UML diagram and would like to wrap text within the shapes drawn with d3. I've gotten as far as the code below and can't find a solution to make the text 'fit' within my shape (see image below).

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');

解决方案

Here is the best I could do.

I want to center and wrap a text inside a circle or rect in SVG. The text should remain centered (horizontal/vertical) whatever the text length.

svg {
    width: 600px;
    height: 200px;
    background-color: yellow;
}
.circle {
    background-color: blue;
    height: 100%;
    border-radius: 100%;
    text-align: center;
    line-height: 200px;
    font-size: 30px;
}
.circle span {
    line-height: normal;
    display:inline-block;
    vertical-align: middle;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

<svg>
    <foreignObject width="200" height="200" x="100" y="100" transform="translate(-100,-100)">
        <div class="circle">
            <span>Here is a</span>
        </div>
    </foreignObject>

    <foreignObject width="200" height="200" x="300" y="100" transform="translate(-100,-100)">
        <div class="circle">
            <span>Here is a paragraph</span>
        </div>
    </foreignObject>

    <foreignObject width="200" height="200" x="500" y="100" transform="translate(-100,-100)">
        <div class="circle">
            <span>Here is a paragraph that requires word wrap</span>
        </div>
    </foreignObject>
</svg>

The transform attribute is not mandatory, I'm using a translate(-r, -r) so that the (x,y) of the foreignObject is like the (cx, cy) of the SVG circle, and width, height = 2*r with r the radius.

I did this to use as nodes within a D3 force layout. I leave as an exercise to translate this snippet into javascript D3's style.

这篇关于将文本包裹在圆圈内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！