SVG文本，tspan字体大小和居中

Question

我在SVG上有一个字体大小的问题，我们在svg中可以看到字体大小:16 on与段落字体大小不同，但是它们的值16px相同。我希望在svg这样的段落中有字体大小。

第二个问题是，当我删除<tspan text-anchor="middle" class="tc-label-value">85</tspan>时，如何将<tspan class="label-text" text-anchor="middle" x="0" y="50" dy="15">Text in SVG</tspan>集中--我的意思是，当我有Text in svg而没有https://codepen.io/palaniichukdmytro/pen/BaaKbze的时候

Answer 1

SVG文本，& span字体大小和中心解决方案

​

body {
  margin: 0;
}

.wr {
  width: 180px;
  margin: 0 auto;
}

.label-text {
  font-size: 12px;
  text-align: center;
}

.tc-label-value {
  font-size: 12px;
  text-align: center;
}

.par {
  font-size: 16px;
  text-align: center;
}

<div class='wr'>
  <svg viewBox="0 0 100 100" width="100%" height="100%" style="display: block;">
            <path d="M 95.5 50 A 45.5 45.5 0 1 1 11.315120324302569 26.047336589080288" stroke-width="9" stroke-dasharray="168.16760675098308" stroke-dashoffset="2.842170943040401e-14" stroke="#a3bfff" stroke-linecap="round" fill="none" style="transition: stroke-dashoffset 500ms ease-out 0s;"></path>
            <path d="M 11.315120324302569 26.047336589080288 A 45.5 45.5 0 0 1 95.5 49.999999999999986" stroke-width="9" stroke-dasharray="117.71732472568812" stroke-dashoffset="0" stroke="#66bb6a" stroke-linecap="round" fill="none" style="transition: stroke-dashoffset 500ms ease-out 0s;"></path>
            <text transform="translate(50)" x="0" y="50">
                <tspan text-anchor="middle" class="tc-label-value">85</tspan>
                <tspan class="label-text" text-anchor="middle" x="0" y="50" dy="15">Text in SVG</tspan>
            </text>
        </svg>
  <p class='par'>Text Paragraph</p>
</div>

​

Answer 2

svg元素的字体大小应该是8.88px。为什么？因为svg的宽度是100个单位或px ( viewBox="0 100 100“)，并且被缩放到180 px( .wr{width: 180px;} )。因为您需要svg内的字体大小看起来像16 be，所以真正的字体大小应该是16* 100 / 180 = 8.88

​

.wr {
  width: 180px; 
}
.par{
  font-size: 16px;
}

svg{font-size: 8.88px;}

<div class='wr'>
  <svg viewBox="0 0 100 100" style="display: block;">
    <path d="M 95.5 50 A 45.5 45.5 0 1 1 11.315120324302569 26.047336589080288" stroke-width="9" stroke-dasharray="168.16760675098308" stroke-dashoffset="2.842170943040401e-14" stroke="#a3bfff" stroke-linecap="round" fill="none" style="transition: stroke-dashoffset 500ms ease-out 0s;"></path>
      <path d="M 11.315120324302569 26.047336589080288 A 45.5 45.5 0 0 1 95.5 49.999999999999986" stroke-width="9" stroke-dasharray="117.71732472568812" stroke-dashoffset="0" stroke="#66bb6a" stroke-linecap="round" fill="none" style="transition: stroke-dashoffset 500ms ease-out 0s;"></path>
    <text transform="translate(50)" x="0" y="50">
      <tspan text-anchor="middle" class="tc-label-value">85</tspan>
      <tspan class="label-text" text-anchor="middle" x="0" y="50" dy="15">Text in SVG</tspan>       
    </text>
 </svg>
  <p class='par'>Text Paragraph</p>
</div>

​