為什么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 = truestyle="font-size:${fsize}px; text-align: ${fontalign};text-decoration:${tdecoration};letter-spacing:${fontspace}px; color:${fontcolor};line-height:${linespace};font-style:${fstyle};font-weight: ${fontbold};-webkit-user-select: text;font-family: ${ffamily}" class="initDiv" >${fontcontent} ${initDiv}</div></foreignObject> `;

手機端給div添加change事件。其他方式不好用

$(".initDiv", $text)[0].addEventListener('input', function(){minsize($text, fsize); });

保存文字的框不變，自動根據文字的數量縮小放大文字。

function minsize($text ,fize){var $content=$(".initDiv", $text);var $box=$("foreignObject", $text);let fontSize = parseInt($content.css('font-size'));if($content.height() >= $box.height()){let minSc = (fontSize - 1) / fontSize;let lineHeight = parseInt($content.css('line-height'));let letterSpacing = parseInt($content.css('letter-spacing'));lineHeight = lineHeight * minSc;letterSpacing = letterSpacing * minSc;$content.css('font-size',fontSize - 1 +'px').css('line-height',lineHeight +'px').css('letter-spacing',letterSpacing +'px');minsize($text, 0)} else if (fontSize < fize){let minSc = (fontSize + 2) / fontSize;let lineHeight = parseInt($content.css('line-height'));let letterSpacing = parseInt($content.css('letter-spacing'));lineHeight = lineHeight * minSc;letterSpacing = letterSpacing * minSc;$content.css('font-size',fontSize + 1 +'px').css('line-height',lineHeight +'px').css('letter-spacing',letterSpacing +'px');minsize($text ,fize)} }

轉載于:https://my.oschina.net/xmqywx/blog/1588360

總結

以上是生活随笔為你收集整理的Svg 嵌入可编辑的div的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。