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

Question

我有一些多行文本，我正在使用<text>并<tspan>处理它。我希望每一行都居中，所以我在 main <text>tag中使用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>