在Firefox中使svg元素中的文本居中,可以通过以下步骤实现:
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle">居中文本</text>
其中,x和y属性设置为"50%"表示文本的水平和垂直位置都居中,text-anchor属性设置为"middle"表示文本的水平对齐方式为居中,dominant-baseline属性设置为"middle"表示文本的垂直对齐方式为居中。
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle">
<tspan x="50%" dy="0">第一行文本</tspan>
<tspan x="50%" dy="1.2em">第二行文本</tspan>
</text>
其中,dy属性用于设置每行文本相对于前一行的垂直偏移量,"1.2em"表示相对于前一行的1.2倍行高的偏移量。
<svg id="mySvg" width="100%" height="100%">
<text id="myText">居中文本</text>
</svg>
<script>
var svg = document.getElementById("mySvg");
var text = document.getElementById("myText");
var svgWidth = svg.clientWidth;
var svgHeight = svg.clientHeight;
var textWidth = text.getBBox().width;
var textHeight = text.getBBox().height;
text.setAttribute("x", (svgWidth - textWidth) / 2);
text.setAttribute("y", (svgHeight - textHeight) / 2);
</script>
以上代码通过获取svg元素和文本元素的宽度和高度,计算出文本的位置并设置x和y属性,使文本居中显示。
推荐的腾讯云相关产品:腾讯云服务器(CVM)和腾讯云对象存储(COS)。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云