Svg 嵌入可编辑的div

最新推荐文章于 2023-11-29 10:38:11 发布

weixin_34087301

最新推荐文章于 2023-11-29 10:38:11 发布

阅读量4.5k

点赞数

文章标签： xhtml javascript ViewUI

原文链接：https://my.oschina.net/xmqywx/blog/1588360

版权

本文介绍了如何在SVG中使用foreignObject标签嵌入可编辑的Div，并强调了设置xmlns属性的重要性。通过contenteditable属性，使得Div具备编辑功能，同时在手机端利用-webkit-user-select: text确保文字可选中。为了在移动端监听文字变化，建议使用change事件。此外，还讨论了如何让Div根据文字数量动态调整大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

svg里面的foreignObject 标签可以嵌入div。

注意格式第一个标签加上xmlns="http://www.w3.org/1999/xhtml"。

下面主要说一下div的可以编辑状态。

首先是第一个属性contenteditable，div可以编辑。

样式-webkit-user-select: text，为了在手机端可以使用。

<meta name="format-detection" content="telephone=no" /> //让手机号不要自动变成链接，手机端用

var textHtml = `
 <foreignObject width="${width}" height="${height}">
        <div xmlns="http://www.w3.org/1999/xhtml"
            contenteditable = true
            style="font-size:${fsize}px; text-align: ${fonta