我有一个 svg，我需要将对象中的文本居中对齐。
当我执行 text-anchor:middle 时，文本在对象内部对齐，有人可以指导我解决这个问题吗？
<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>
我已经粘贴了svg，对象基本上是一颗星星。我需要在星内对齐中心，但它在星的边界内对齐。
注意:对象内的数字是动态的，可以在 0-999 之间。
最佳答案
您的问题的原因很简单。文本的 x 坐标不在形状的中间。我们可以通过添加一个与您的文本具有相同坐标的红色小圆圈来看到:
<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>所有 text-anchor="middle" 所做的就是将您的文本放在您提供的 x 坐标处。如果该位置位于 SVG 的左侧，那么您的文本字符串将以 SVG 左侧的某个点为中心。
要解决此问题，您需要更新文本位置。形状的中心大约在 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>关于html - 如何在 SVG 中将文本居中放置在对象中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51809670/