Svg 嵌入可编辑的div

最新推荐文章于 2024-07-07 23:10:31 发布

weixin_34087301

最新推荐文章于 2024-07-07 23:10:31 发布

阅读量4.3k

点赞数

文章标签： xhtml javascript ViewUI

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

版权

为什么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: ${fontalign};
                 text-decoration