svg中text文本自动换行
时间: 2024-01-28 20:04:49 浏览: 170
SVG中的文本可以通过设置`<text>`元素的`textWrap`属性来进行自动换行。该属性有三个可选值:`none`、`wrap`和`truncate`。
- `none`:表示不进行自动换行,所有文本都在一行中显示。
- `wrap`:表示进行自动换行,当一行文本超出指定的宽度时自动换行到下一行。
- `truncate`:表示进行自动截断,当一行文本超出指定的宽度时自动截断并添加省略号。
下面是一个示例代码,演示如何使用`textWrap`属性来进行自动换行:
```html
<svg width="200" height="200">
<rect x="10" y="10" width="180" height="80" fill="#f3f3f3"/>
<text x="20" y="30" font-size="16" textWrap="wrap" width="160">
This is a long text that needs to be wrapped into multiple lines in SVG.
</text>
</svg>
```
在上面的代码中,`<rect>`元素用于创建一个背景矩形,`<text>`元素用于创建一个文本标签。`textWrap`属性设置为`wrap`,表示进行自动换行。`width`属性设置为`160`,表示文本标签的最大宽度为160个像素。当文本超出160个像素时,会自动换行到下一行。
输出结果如下所示:
![SVG自动换行示例](https://cdn.jsdelivr.net/gh/FeiChaoyu/PicGo/img/20210928184335.png)
阅读全文