svg图里怎么双击修改文本内容

来源:5-1 SVG-<text>、<tspan> 以及其属性

xwfy

2018-09-05 14:20

svg图里怎么双击修改文本内容,然后确定就可以改变其内容

写回答 关注

2回答

  • 丿有点丶小情绪丨
    2019-12-10 20:42:16

    通过HTML element对象的 getBoundingClientRect 获取对象的绝对位置 left和top然后创建一个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())	})})


  • banksy高阳
    2019-07-30 23:21:03
    <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

SVG是HTML5 中矢量图的标记语言,学习后掌握更多的干货

52638 学习 · 213 问题

查看课程

相似问题