定位svg文本

Question

所以我有一个仪表图，中间有一些文字。主组相对于其父组进行平移，因此它将居中。我不知道如何让 .center 和 .onlineText 像图像一样正确排列。代码 sn-p 如下。

<svg _ngcontent-c30="" class="gauge" id="gauge-AgentStatus" width="100%" height="100%" viewBox="0 20 424 250" preserveAspectRatio="xMidYMid meet"><defs _ngcontent-c30=""><linearGradient _ngcontent-c30="" id="mainGradient" x1="0%" x2="100%" y1="0%" y2="100%"><stop _ngcontent-c30="" class="start" offset="0%" stop-color="white" stop-opacity="1"></stop><stop _ngcontent-c30="" class="end" offset="100%" stop-color="blue" stop-opacity="1"></stop></linearGradient></defs><g transform="translate(212,125)"><g class="backPath"><path class="backPathArc" d="M103.55887361070263,47.394500828980114A113.88888888888889,113.88888888888889,0,1,1,-103.55887361070263,-47.394500828980114A113.88888888888889,113.88888888888889,0,1,1,103.55887361070263,47.394500828980114M34.57216181750291,76.4337053025479A83.88888888888889,83.88888888888889,0,1,0,-34.57216181750291,-76.4337053025479A83.88888888888889,83.88888888888889,0,1,0,34.57216181750291,76.4337053025479Z" fill="gray"></path></g><g class="frontPath"><path class="frontPathArc" d="M11.36991689588878,-113.31991882333071A113.88888888888889,113.88888888888889,0,1,1,-11.36991689588878,113.31991882333071A113.88888888888889,113.88888888888889,0,1,1,11.36991689588878,-113.31991882333071M9.777183295791342,-83.31717929582616A83.88888888888889,83.88888888888889,0,1,0,-9.777183295791342,83.31717929582616A83.88888888888889,83.88888888888889,0,1,0,9.777183295791342,-83.31717929582616Z" fill="url(#mainGradient)"></path></g><g class="center"><text class="centerText" alignment-baseline="hanging" text-anchor="end" fill="#4d4d4d" style="font-size: 80px;">100</text><text class="percentText" alignment-baseline="hanging" text-anchor="start" fill="#4d4d4d" style="font-size: 30px;">%</text></g><g class="onlineText"><text class="percentText" alignment-baseline="baseline" fill="#4d4d4d" dy=".35em" style="font-size: 20px;">ONLINE</text></g></g></svg>

Answer 1

我已删除转换并将 viewBox 更改为 viewBox="-114 -114 228 228"。 svg 画布的中心现在是 0,0。由于文本没有 x 或 y 属性，x 和 y 的默认值为 0。接下来，您需要将文本围绕 0,0 点居中。您可以使用dominant-baseline="middle" 和text-anchor="middle" 来完成。现在文本的所有 3 个文本元素都重叠了。为了偏移文本，您可以使用dy 属性

观察：宽度：300px 仅用于演示。带有 viewBox 但没有 width 属性的 SVG 元素将占用所有可用的宽度。

观察 2：您可以使用带有白色笔划的 <circle> 而不是那些路径

svg{width:300px; border:1px solid; display:block;margin:0 auto;}

<svg _ngcontent-c30="" class="gauge" id="gauge-AgentStatus" viewBox="-114 -114 228 228" preserveAspectRatio="xMidYMid meet">
<defs _ngcontent-c30="">
<linearGradient _ngcontent-c30="" id="mainGradient" x1="0%" x2="100%" y1="0%" y2="100%">
<stop _ngcontent-c30="" class="start" offset="0%" stop-color="white" stop-opacity="1"></stop>
<stop _ngcontent-c30="" class="end" offset="100%" stop-color="blue" stop-opacity="1"></stop>
</linearGradient></defs>
<g>
<g class="backPath" >
<path class="backPathArc" d="M103.55887361070263,47.394500828980114A113.88888888888889,113.88888888888889,0,1,1,-103.55887361070263,-47.394500828980114A113.88888888888889,113.88888888888889,0,1,1,103.55887361070263,47.394500828980114M34.57216181750291,76.4337053025479A83.88888888888889,83.88888888888889,0,1,0,-34.57216181750291,-76.4337053025479A83.88888888888889,83.88888888888889,0,1,0,34.57216181750291,76.4337053025479Z" fill="gray"></path>
</g>
<g class="frontPath">
<path class="frontPathArc" d="M11.36991689588878,-113.31991882333071A113.88888888888889,113.88888888888889,0,1,1,-11.36991689588878,113.31991882333071A113.88888888888889,113.88888888888889,0,1,1,11.36991689588878,-113.31991882333071M9.777183295791342,-83.31717929582616A83.88888888888889,83.88888888888889,0,1,0,-9.777183295791342,83.31717929582616A83.88888888888889,83.88888888888889,0,1,0,9.777183295791342,-83.31717929582616Z" fill="url(#mainGradient)"></path>
</g>
<g class="center">
<text class="centerText" dominant-baseline="middle" text-anchor="middle" dy="-40" fill="#4d4d4d" style="font-size: 80px;">100</text>
<text class="percentText" dominant-baseline="middle" text-anchor="middle" fill="#4d4d4d" style="font-size: 30px;">%</text>
</g>
<g class="onlineText">
<text class="percentText" dominant-baseline="middle" text-anchor="middle" dy="40" fill="#4d4d4d" dy=".35em" style="font-size: 20px;">ONLINE</text></g></g>
</svg>

Answer 2

一位同事想出了这个解决方案：

svg{
  background: yellow;
}
.text1 {
  dominant-baseline: hanging;
  text-anchor: middle;
}
.value {
  font-size: 50px;
}
.percent {
  font-size: 20px;
}
.text2 {
  dominant-baseline: baseline;
  text-anchor: middle;
}

<svg height=200 width=200>
    <g id="svgFont" stroke-width="1" transform="translate(100, 100)">
        <text class="text1" x="0" y="-35"><tspan class=value>100</tspan><tspan class="percent">%</tspan></text>
        <text class="text2" x="0" y="20">Online</text>
    </g>
</svg>