代码之家 › 专栏 › 技术社区 › iamcootis

定位svg文本

alignment text svg

iamcootis · 技术社区 · 5 年前

所以我有一个中间有一些文字的图表。主组相对于其父组进行转换,因此它将居中。我不知道如何让.center和.onlineText像图片一样正确排列。下面是代码段。

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

0 回复 | 直到 5 年前

enxaneta 5 年前

dominant-baseline="middle" 和 text-anchor="middle" dy 属性

观察结果:宽度:300px只是为了演示。带有viewBox但没有width属性的SVG元素将采用所有可用的宽度。

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

iamcootis 5 年前

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

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>