您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

如何在JavaScript中对SVG文本进行换行?

如何在JavaScript中对SVG文本进行换行?

SVG 1.1不支持功能。SVG 1.2确实具有textArea自动换行的元素,但并非在所有浏览器中都实现。SVG 2 并未计划实现textArea,但确实具有自动包装的文本。

但是,鉴于您已经知道换行应在何处发生,可以将文本分成多个<tspan>,每个都带有x="0"dy="1.4em"来模拟实际的文本行。例如:

<g transform="translate(123 456)"><!-- replace with your target upper left corner coordinates -->
  <text x="0" y="0">
    <tspan x="0" dy="1.2em">very long text</tspan>
    <tspan x="0" dy="1.2em">I would like to linebreak</tspan>
  </text>
</g>

当然,由于要使用JavaScript进行操作,因此必须手动创建每个元素并将其插入DOM。

javascript 2022/1/1 18:22:22 有570人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶