我有如下矩形:
<rect x="0px" y="0px" width="60px" height="20px"/>
我想把"虚构"这个词放在中间。对于其他矩形，SVG换行是否保持在其中?我似乎找不到任何关于在水平和垂直居中的形状和换行中插入文本的具体内容。此外，文本不能离开矩形。
查看https://www.w3.org/TR/SVG/text.html#TextElement示例并没有帮助，因为文本元素的x和y与矩形的x和y不同。文本元素似乎没有宽度和高度。我不确定这里的数学。
(我的HTML表就是不能工作。)
当前回答
你可以直接使用text-anchor = "middle"属性。我建议在矩形和文本上创建一个包装器svg元素。这样你就可以使用一个css选择器来使用整个元素。确保你把'x'和'y'属性的文本为50%。
<svg class="svg-rect" width="50" height="40"> <矩形x = " 0 " y = " 0 " rx = =“3”变化中“3”宽度=“50”高度=“40”填补= " # e7e7e7 " > < /矩形> <text x="50%" y="50%" text-anchor="middle" stroke="black" stroke-width="1px" dy=".3em"> </text> . < / svg >
其他回答
在SVG中水平和垂直居中文本的简单解决方案:
Set the position of the text to the absolute center of the element in which you want to center it: If it's the parent, you could just do x="50%" y ="50%". If it's another element, x would be the x of that element + half its width (and similar for y but with the height). Use the text-anchor property to center the text horizontally with the value middle: middle The rendered characters are aligned such that the geometric middle of the resulting rendered text is at the initial current text position. Use the dominant-baseline property to center the text vertically with the value middle (or depending on how you want it to look like, you may want to do central)
下面是一个简单的演示:
<svg width="200" height="100"> <rect x="0" y="0" width="200" height="100" stroke="红色" stroke-width="3px" fill="白色"/> <text x="50%" y="50%" main -baseline="middle" text-anchor="middle"> text </text> < / svg >
如果你想把它应用到很多元素上，你也可以把它用于CSS。例如:
svg text{
text-anchor: middle;
dominant-baseline: middle;
}
11年太晚了…使用路径长
x="50%" y ="50%"在复杂svg中不起作用
没有人提到pathLength(使它在这里2，所以1是一半)和textPath:
<svg viewbox=“0 0 200 50”> <path id=“P” pathLength=“2” d=“M0 25h200” stroke=“blue”/> <text> <textPath href=“#P” 开始偏移量=“1” 文本锚点=“中间” 主导基线=“中间” fill=“绿色” 字体大小=“14px”>中间对齐</textPath> </text> </svg>
之前的答案在使用圆角或描边宽度为>1时给出的结果很差。例如，你会期望下面的代码生成一个圆角矩形，但是角是由父svg组件剪辑的:
<svg width="200" height="100"> <！——这个矩形应该有圆角——> <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%" align -baseline="middle" text-anchor="middle"> clip BORDER</text> < / svg >
相反，我建议将文本包装在svg中，然后将新的svg和rect嵌套在g元素中，如下例所示:
< !——这里的外部SVG——> <svg width="400px" height="300px"> < !——矩形/文本组——> < g变换= "翻译(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%" align -baseline="middle" text-anchor="middle">正确的BORDER</text> < / svg > < / g > < !——图像的其余代码——> < / svg >
这修复了上面的答案中出现的剪辑问题。我还使用transform="translate(x,y)"属性翻译了rect/text组，以演示这提供了一种更直观的方法来在屏幕上定位rect/text。
你可以直接使用text-anchor = "middle"属性。我建议在矩形和文本上创建一个包装器svg元素。这样你就可以使用一个css选择器来使用整个元素。确保你把'x'和'y'属性的文本为50%。
<svg class="svg-rect" width="50" height="40"> <矩形x = " 0 " y = " 0 " rx = =“3”变化中“3”宽度=“50”高度=“40”填补= " # e7e7e7 " > < /矩形> <text x="50%" y="50%" text-anchor="middle" stroke="black" stroke-width="1px" dy=".3em"> </text> . < / svg >
在矩形中插入文本的一种方法是插入一个外部对象，它是一个DIV，在矩形对象中。
这样，文本将遵守DIV的限制。
var g = d3.select("svg"); g.append("rect") .attr("x", 0) .attr("y", 0) .attr("width","100%") .attr("height","100%") .attr("fill","#000"); var fo = g.append("foreignObject") .attr("width","100%"); fo.append("xhtml:div") .attr("style","width:80%;color:#FFF;margin-right: auto;margin-left: auto;margin-top:40px") .text("Mussum Ipsum, cacilds vidis litro abertis Mussum Ipsum, cacilds vidis litro abertis Mussum Ipsum, cacilds vidis litro abertis"); <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.js"></script> <svg width="200" height="200"></svg>
