How to center a text within a object in SVG?

Question

I have a svg where I need to center align the text within a object.

When I do text-anchor:middle,the text is aligning inside the object, Can someone guide me to about the issue?

<svg xmlns="http://www.w3.org/2000/svg" width="190.661" height="149.207" viewBox="0 0 40.357 31.582" id="svg8">
    <g id="layer1" transform="translate(-84.848 -70.562)">
        <g id="g3196" transform="matrix(.13679 0 0 .13679 88.795 70.148)" fill="#ff9f10">
            <path id="path3192" fill="#f9be20" fill-opacity=".949" d="M234.995 92.878c3.44-4.291 2.202-9.754-2.754-12.141L195.62 63.1c-4.956-2.386-10.011-8.726-11.235-14.088L175.34 9.381c-1.225-5.362-6.28-7.797-11.236-5.411l-36.62 17.629c-4.956 2.385-13.064 2.383-18.02-.004L72.841 3.946c-4.955-2.388-10.011.045-11.235 5.407l-9.044 39.593c-1.225 5.361-6.283 11.693-11.24 14.075L4.71 80.601c-4.957 2.383-6.203 7.83-2.769 12.125l25.321 31.633c3.435 4.295 5.239 12.136 4.011 17.496L22.249 181.1c-1.229 5.36 2.266 9.503 7.766 9.503h40.646c5.5 0 12.806 3.763 16.234 8.063l25.343 32.024c3.429 4.3 9.04 4.3 12.469 0l25.344-32.024c3.43-4.3 10.735-8.063 16.235-8.063h40.649c5.5 0 8.994-4.143 7.765-9.503l-9.027-39.123c-1.229-5.36.58-13.258 4.021-17.548zm-116.522 89.547c-38.638 0-70.072-31.434-70.072-70.072 0-38.638 31.434-70.072 70.072-70.072 38.638 0 70.072 31.434 70.072 70.072 0 38.638-31.434 70.072-70.072 70.072z" />
        </g>
        <path id="path871" fill="none" stroke="#fff000" stroke-width=".238" stroke-opacity="0" d="M84.88 101.99c13.095-3.758 26.52-3.707 40.294 0" />
        <text x="96.119" y="89.281" id="text3211" font-weight="400"font-size="12.154" font-family="Yeon Sung" letter-spacing="0" word-spacing="0" stroke-width=".326" style="line-height:1.25;-inkscape-font-specification:'Yeon Sung';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start">
            <tspan id="tspan3209" x="96.119" y="89.281" style="-inkscape-font-specification:'Yeon Sung'">2</tspan>
        </text>
    </g>
</svg>

I have pasted the svg,the object is basically a star. I need to align center inside the star, but it is alinging within the borders of the star.

NOTE: The number inside the object is dynamic and can be in a range of between 0-999.

Answer 1

Your problem has a very simple cause. The x coordinate of your text is not in the middle of your shape. We can see that by adding a small red circle that has the same coordinates as your text:

<svg xmlns="http://www.w3.org/2000/svg" width="190.661" height="149.207" viewBox="0 0 40.357 31.582" id="svg8">
  <g id="layer1" transform="translate(-84.848 -70.562)">
    <g id="g3196" transform="matrix(.13679 0 0 .13679 88.795 70.148)" fill="#ff9f10">
      <path id="path3192" d="M234.995 92.878c3.44-4.291 2.202-9.754-2.754-12.141L195.62 63.1c-4.956-2.386-10.011-8.726-11.235-14.088L175.34 9.381c-1.225-5.362-6.28-7.797-11.236-5.411l-36.62 17.629c-4.956 2.385-13.064 2.383-18.02-.004L72.841 3.946c-4.955-2.388-10.011.045-11.235 5.407l-9.044 39.593c-1.225 5.361-6.283 11.693-11.24 14.075L4.71 80.601c-4.957 2.383-6.203 7.83-2.769 12.125l25.321 31.633c3.435 4.295 5.239 12.136 4.011 17.496L22.249 181.1c-1.229 5.36 2.266 9.503 7.766 9.503h40.646c5.5 0 12.806 3.763 16.234 8.063l25.343 32.024c3.429 4.3 9.04 4.3 12.469 0l25.344-32.024c3.43-4.3 10.735-8.063 16.235-8.063h40.649c5.5 0 8.994-4.143 7.765-9.503l-9.027-39.123c-1.229-5.36.58-13.258 4.021-17.548zm-116.522 89.547c-38.638 0-70.072-31.434-70.072-70.072 0-38.638 31.434-70.072 70.072-70.072 38.638 0 70.072 31.434 70.072 70.072 0 38.638-31.434 70.072-70.072 70.072z" fill="#f9be20" fill-opacity=".949"/>
    </g>
    <path d="M84.88 101.99c13.095-3.758 26.52-3.707 40.294 0" id="path871" fill="none" stroke="#fff000" stroke-width=".238" stroke-opacity="0"/>

    <text style="line-height:1.25;-inkscape-font-specification:'Yeon Sung';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start" x="96.119" y="89.281" id="text3211" font-weight="400" font-size="12.154" font-family="Yeon Sung" letter-spacing="0" word-spacing="0" stroke-width=".326"><tspan id="tspan3209" x="96.119" y="89.281" style="-inkscape-font-specification:'Yeon Sung'">2</tspan></text>
    <circle cx="96.119" cy="89.281" r="1" fill="red"/>
  </g>
</svg>

All text-anchor="middle" does is centre your piece of text at the x coordinate you provide. If that position is on the left of the SVG, then your string of text will be centred at a point on the left of the SVG.

To fix this, you need to update your text position. The centre of your shape is at approx 105.

<svg xmlns="http://www.w3.org/2000/svg" width="190.661" height="149.207" viewBox="0 0 40.357 31.582" id="svg8">
  <g id="layer1" transform="translate(-84.848 -70.562)">
    <g id="g3196" transform="matrix(.13679 0 0 .13679 88.795 70.148)" fill="#ff9f10">
      <path id="path3192" d="M234.995 92.878c3.44-4.291 2.202-9.754-2.754-12.141L195.62 63.1c-4.956-2.386-10.011-8.726-11.235-14.088L175.34 9.381c-1.225-5.362-6.28-7.797-11.236-5.411l-36.62 17.629c-4.956 2.385-13.064 2.383-18.02-.004L72.841 3.946c-4.955-2.388-10.011.045-11.235 5.407l-9.044 39.593c-1.225 5.361-6.283 11.693-11.24 14.075L4.71 80.601c-4.957 2.383-6.203 7.83-2.769 12.125l25.321 31.633c3.435 4.295 5.239 12.136 4.011 17.496L22.249 181.1c-1.229 5.36 2.266 9.503 7.766 9.503h40.646c5.5 0 12.806 3.763 16.234 8.063l25.343 32.024c3.429 4.3 9.04 4.3 12.469 0l25.344-32.024c3.43-4.3 10.735-8.063 16.235-8.063h40.649c5.5 0 8.994-4.143 7.765-9.503l-9.027-39.123c-1.229-5.36.58-13.258 4.021-17.548zm-116.522 89.547c-38.638 0-70.072-31.434-70.072-70.072 0-38.638 31.434-70.072 70.072-70.072 38.638 0 70.072 31.434 70.072 70.072 0 38.638-31.434 70.072-70.072 70.072z" fill="#f9be20" fill-opacity=".949"/>
    </g>
    <path d="M84.88 101.99c13.095-3.758 26.52-3.707 40.294 0" id="path871" fill="none" stroke="#fff000" stroke-width=".238" stroke-opacity="0"/>

    <text style="line-height:1.25;-inkscape-font-specification:'Yeon Sung';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start" id="text3211" font-weight="400" font-size="12.154" font-family="Yeon Sung" letter-spacing="0" word-spacing="0" stroke-width=".326"
      text-anchor="middle">
      <tspan id="tspan3209" x="105" y="89.281" style="-inkscape-font-specification:'Yeon Sung'">2</tspan>
    </text>
  </g>
</svg>