SVG text, tspan font-size and centered

I have an issue with font size on SVG as us can see in svg the font-size:16px different from paragraph font-size but the they have the same value 16px. I would like to have font size in svg such on paragraph.

The second issue, it's how to center <tspan text-anchor="middle" class="tc-label-value">85</tspan> when I delete <tspan class="label-text" text-anchor="middle" x="0" y="50" dy="15">Text in SVG</tspan> I mean the is a case when I have Text in svg and have not https://codepen.io/palaniichukdmytro/pen/BaaKbze

2 answers

  • answered 2019-10-15 19:19 enxaneta

    The font size for the svg element should be 8.88px. Why? Because the svg's width is 100 units or px ( viewBox="0 0 100 100" ) and is scaled up to 180px ( .wr{width: 180px;} ). Since you need the font size inside the svg to look like 16px, the real font size should 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>

  • answered 2019-10-16 07:19 Piyush Teraiya

    SVG text, & span font-size and center solution

    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>