如何自动换行圆环图的图例文字

Question

我有一个带有传奇的圆环图。

问题是图例的文字太长而且溢出了容器的大小。

如何进行自动换行以便文本在下一行继续？

我尝试设置word-wrap: break-word属性但不起作用。

Answer 1

正如@cuckovic所说，你可以使用<foreignObject>自动换行。这方面的一个例子是：

<svg width="400px" height="300px">
.
.
    <foreignObject width="100" height="50">
        <p>Here is a paragraph that requires word wrap.</p>
    </foreignObject>
.
.
</svg>

给出的示例来自Mozilla Developer的网站https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject