我试图将<text>
居中<path>
元素内。路径是使用@opsb很好的答案绘制的圆圈。我可以使用text-anchor='middle'
水平居中文本。
有没有办法垂直居中?
<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path id='path' fill="transparent" stroke='red' stroke-width='6'/>
<text x="100" y="100" font-family="Verdana" font-size="50" fill="blue" text-anchor='middle'>5</text>
</svg>
JSFiddle with the javascript.
您需要
使用对齐基线来垂直居中文本。
像这样:
<text x="100" y="100" font-family="Verdana" font-size="50" fill="blue" text-anchor='middle' alignment-baseline="central">5</text>
Svg 中心文本
由于 svg 是响应式的我通常会输入一个关于圆半径的硬值。
因此,只需添加: transform="translate(0, 15)
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
}
function describeArc(x, y, radius, startAngle, endAngle) {
var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);
var arcSweep = endAngle - startAngle <= 180 ? "0" : "1";
var d = [
"M", start.x, start.y,
"A", radius, radius, 0, arcSweep, 0, end.x, end.y
].join(" ");
return d;
}
$('#path').attr("d", describeArc(100, 100, 50, 0, 180));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path id='path' fill="transparent" stroke='red' stroke-width='6' />
<text x="100" y="100" transform="translate(0, 15)" font-family="Verdana" font-size="50" fill="blue" text-anchor='middle'>5</text>
<circle cx="100" cy="100" fill="black" r="2" />
<circle cx="100" cy="50" fill="black" r="2" />
</svg>
您现在可以使用 dominant-baseline="central"
垂直对齐文本,而无需 javascript。
<svg width="150px" height="150px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="75" cy="75" r="69" stroke="red" fill="none" stroke-width="6" />
<text x="75" y="75" font-family="Verdana" font-size="50" fill="blue" text-anchor='middle' dominant-baseline="central">5</text>
</svg>
源