0

我有一些多行文本,我正在使用<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>
4

1 回答 1

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>

于 2017-04-01T23:48:02.120 回答