代码之家 › 专栏 › 技术社区 › Rehan

svg上的文本定位不工作

svg css html

Rehan · 技术社区 · 6 年前

我有一个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 回复 | 直到 5 年前

Paul LeBeau 6 年前

你的问题有一个很简单的原因。这个 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" 十 协调你提供的。如果该位置在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>