如何在SVG矩形中放置和居中文本
如何在SVG矩形中放置和居中文本
提问于 2011-04-05 10:00:26
我有下面的矩形。
<rect x="0px" y="0px" width="60px" height="20px"/>我想把“虚构”这个词放在中间。对于其他矩形，svg word换行是否保持在它们内部？我似乎找不到任何关于在水平和垂直居中的形状中插入文本和自动换行的具体内容。而且，文本不能离开矩形。
查看http://www.w3.org/TR/SVG/text.html#TextElement示例没有任何帮助，因为文本元素的x和y与矩形的x和y不同，文本元素似乎没有宽度和高度。我对这里的数学不太确定。
(我的html表格就是不能工作。)
回答 9
Stack Overflow用户
发布于 2019-02-05 04:03:28
如果您正在以编程方式创建SVG，则可以对其进行简化，并执行以下操作：
<g>
<rect x={x} y={y} width={width} height={height} />
<text
x={x + width / 2}
y={y + height / 2}
dominant-baseline="middle"
text-anchor="middle"
>
{label}
</text>
</g>Stack Overflow用户
发布于 2017-07-01 12:16:17
当使用圆角或大于1的stroke-width时，前面的答案给出了很差的结果。例如，您可能希望下面的代码生成一个圆角矩形，但这些角是由父svg组件裁剪的：
<svg width="200" height="100">
<!--this rect should have rounded corners-->
<rect x="0" y="0" rx="5" ry="5" width="200" height="100" stroke="red" stroke-width="10px" fill="white"/>
<text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">CLIPPED BORDER</text>
</svg>
相反，我建议将text包装在svg中，然后将新的svg和rect嵌套在一个g元素中，如下例所示：
<!--the outer svg here-->
<svg width="400px" height="300px">
<!--the rect/text group-->
<g transform="translate(50,50)">
<rect rx="5" ry="5" width="200" height="100" stroke="green" fill="none" stroke-width="10"/>
<svg width="200px" height="100px">
<text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">CORRECT BORDER</text>
</svg>
</g>
<!--rest of the image's code-->
</svg>
这解决了上面答案中出现的裁剪问题。我还使用transform="translate(x,y)"属性转换了rect/text组，以演示这为在屏幕上定位rect/text提供了一种更直观的方法。
Stack Overflow用户
发布于 2016-08-12 05:10:11
您可以直接使用text-anchor = "middle"属性。我建议在矩形和文本上创建一个包装器svg元素。这样，您就可以使用一个css选择器来使用整个元素。确保将文本的“x”和“y”属性设置为50%。
<svg class="svg-rect" width="50" height="40">
<rect x="0" y="0" rx="3" ry="3" width="50" height="40" fill="#e7e7e7"></rect>
<text x="50%" y="50%" text-anchor="middle" stroke="black" stroke-width="1px" dy=".3em">N/A</text>
</svg>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5546346
复制相关文章
相似问题
腾讯云开发者
