SVG：如何从 tspan 中删除文本锚点设置为中间的多行文本的偏移量？

Question

我有一些多行文本，我正在使用 <text> 和 <tspan> 来处理这个问题。我希望每一行都居中，所以我在主 <text> 标签 text-anchor="middle" 中使用。但是，即使使用 dx=0，整个块仍然会移动总长度的文本。

如何制作多行 <tspan> 居中 SVG 文本？

例如

<text text-anchor="middle" font-size="12px">
    This would normally be centered
    <tspan>
        this should be too.
    </tspan>
</text>

Answer 1

您可以为 tspan 指定与文本相同的 x，例如

<svg>
<text x="100" y="30" text-anchor="middle" font-size="12px">
    This would normally be centered
    <tspan x="100" dy="30">
        this should be too.
    </tspan>
</text>
</svg>

或使用转换并为 tspan 设置 x="0"...

    <svg>
    <text transform="translate(100, 30)" text-anchor="middle" font-size="12px">
        This would normally be centered
        <tspan x="0" dy="30">
            this should be too.
        </tspan>
    </text>
    </svg>

SVG：如何从 tspan 中删除文本锚点设置为中间的多行文本的偏移量？

SVG: How to remove the offset from tspan for multiline text with text-anchor set to middle?

svg

text

tspan