bugfix> html > 投稿

オブジェクト内のテキストを中央に揃える必要がある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の範囲で指定できます。

回答 1 件
  • 問題の原因は非常に単純です。ザ・ 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>
    
    

あなたの答え