我有如下矩形:
<rect x="0px" y="0px" width="60px" height="20px"/>
我想把"虚构"这个词放在中间。对于其他矩形，SVG换行是否保持在其中?我似乎找不到任何关于在水平和垂直居中的形状和换行中插入文本的具体内容。此外，文本不能离开矩形。
查看https://www.w3.org/TR/SVG/text.html#TextElement示例并没有帮助，因为文本元素的x和y与矩形的x和y不同。文本元素似乎没有宽度和高度。我不确定这里的数学。
(我的HTML表就是不能工作。)
当前回答
如果你是用编程的方式创建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>
其他回答
我花了很长时间使用SVG来使任何东西居中，所以我滚动了自己的小函数。希望它能帮助到你。注意，它只适用于SVG元素。
function centerinparent(element) { //only works for SVG elements
var bbox = element.getBBox();
var parentwidth = element.parentNode.width.baseVal.value;
var parentheight = element.parentNode.height.baseVal.value;
var newwidth = ((parentwidth / 2) - (bbox.width / 2)) - 2; //i start everything off by 2 to account for line thickness
var newheight = ((parentheight / 2) - (bbox.height / 2)) - 2;
//need to adjust for line thickness??
if (element.classList.contains("textclass")) { //text is origined from bottom left, whereas everything else origin is top left
newheight += bbox.height; //move it down by its height
}
element.setAttributeNS(null, "transform", "translate(" + newwidth + "," + newheight + ")");
// console.log("centering BOXES: between width:"+element.parentNode.width.baseVal.value + " height:"+parentheight);
// console.log(bbox);
}
你可以直接使用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 >
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>
For horizontal and vertical alignment of text in graphics, you might want to use the following CSS styles. In particular, note that dominant-baseline:middle is probably wrong, since this is (usually) half way between the top and the baseline, rather than half way between the top and the bottom. Also, some some sources (e.g. Mozilla) use dominant-baseline:hanging instead of dominant-baseline:text-before-edge. This is also probably wrong, since hanging is designed for Indic scripts. Of course, if you're using a mixture of Latin, Indic, ideographs or whatever, you'll probably need to read the documentation.
/* Horizontal alignment */
text.goesleft{text-anchor:end}
text.equalleftright{text-anchor:middle}
text.goesright{text-anchor:start}
/* Vertical alignment */
text.goesup{dominant-baseline:text-after-edge}
text.equalupdown{dominant-baseline:central}
text.goesdown{dominant-baseline:text-before-edge}
text.ruledpaper{dominant-baseline:alphabetic}
编辑:我刚刚注意到Mozilla也使用了支配基线:基线，这是绝对错误的:它甚至不是一个公认的值!我假设它默认的字体是字母，所以他们很幸运。
更多编辑:Safari(11.1.2)理解边前文本，但不理解边后文本。它在表意文字方面也失败了。好东西，苹果。因此，您最终可能不得不使用字母并允许降序。对不起。
如果你是用编程的方式创建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>
