課程
/前端開發(fā)
/Html5
/走進SVG
svg圖里怎么雙擊修改文本內容,然后確定就可以改變其內容
2018-09-05
源自:走進SVG 5-1
正在回答
通過HTML element對象的 getBoundingClientRect 獲取對象的絕對位置 left和top然后創(chuàng)建一個input標簽,絕對定位offsetParent等于body,設置input的位置覆蓋在這個元素上面,輸入框聚焦
$('svg?text').on('click',?function(){ var?box?=?this.getBoundingClientRect() var?$input?=?$('<input?type="text"?/>') var?$self?=?$(this) //?設置值和屬性 $input.val($self.text()).css({ position:?'absolute', left:?box.left, top:?box.top, width:?box.width, height:?box.height }).appendTo($seft.parents('svg')) //?聚焦 .focus() //?失去焦點移除輸入框,設置值 .on('blur',?function(){ $(this).remove() $seft.text($(this).val()) })})
<rect?id="rect2"?x="-25"?y="95"?height="50"?width="50"?fill="rgba(0,255,255,0.6)"></rect> var?rect?=?document.getElementById("rect2"); rect.addEventListener('dblclick',function?(e)?{ ????//?toggle?dialog?for?confirm?information })
舉報
SVG是HTML5 中矢量圖的標記語言,學習后掌握更多的干貨
1 回答svg文件內的js和jsp頁面的js怎么互相調用
2 回答svg圖形如何設置hover效果:改變顏色
3 回答在html文件里寫的包含svg標簽的代碼怎么查看效果呀
1 回答點擊svg的circle ,并改變circle fill屬性,在手機上改變circle 屬性特別慢
2 回答svg能做圖片蒙蔽嗎?
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2019-12-10
通過HTML element對象的 getBoundingClientRect 獲取對象的絕對位置 left和top然后創(chuàng)建一個input標簽,絕對定位offsetParent等于body,設置input的位置覆蓋在這個元素上面,輸入框聚焦
2019-07-30