Question

我试图使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>

Answer 1

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

<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>

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

1 个答案: