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