本文介绍了将文本包裹在圆圈内的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 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 width="200" height="200" x="100" y="100" transform="translate(-100,-100)"><div class="circle"><span>这里是</span>
</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.
这篇关于将文本包裹在圆圈内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
