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>