如何使文本居中的SVG黑条响应？_Svg

如何使文本居中的SVG黑条响应？

svg

如何使文本居中的SVG黑条响应？,svg,Svg,我试图使SVG元素适合页面底部，无论容器的宽度如何，都以“Loading…”文本为中心。这是我当前的代码，它不起作用，因为消息始终处于固定位置 <svg id="svg-bottom" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs></defs> <g id="bottom"> <re

我试图使SVG元素适合页面底部，无论容器的宽度如何，都以“Loading…”文本为中心。这是我当前的代码，它不起作用，因为消息始终处于固定位置

<svg id="svg-bottom" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="bottom">
    <rect height="40" width="100%" y="0" x="0" fill="#000000" fill-opacity="0.676460598" id="panel"></rect>
    <text id="status" font-family="GothamRounded-Medium, Gotham Rounded" font-size="20" font-weight="400" fill="#FFFFFF">
        <tspan x="190.97" y="16">Loading…</tspan>
    </text>
</g>


加载…

我用以下方法解决了上述问题：

<text font-family="GothamRounded-Medium, Gotham Rounded" font-size="20" font-weight="400" fill="#FFFFFF" x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">Loading…</text>

正在加载…