走进SVG_技术问答

通过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())	})})

2018-09-05 2回答·2988浏览

慕神1214268

为什莫SVG我的利用<text>标签写入中文会报错呢，而英文没有问题呢: 我试了你的代码，中文没有报错了！; 2017-05-25 1回答·1563浏览

qq_木纳悠草_0

文本自动换行: 2017-02-13 2回答·1060浏览

黑白猪

: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<svg width="1200" height="1000" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="grid" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<path stroke="#f0f0f0" fill="none" d="M0 0H20V20"></path>
</pattern>
</defs>
<rect width="1200" height="1000" fill="url(#grid)"></rect>
<text id="sintext" x="100" y="100" style="font-size:30px;">
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</text>
<path d="M100,0V200M0,100H200" stroke="red"></path>
</svg>
<script>
//x=[20,20,20...]
//y=s * sin(w*x + t);
var n=26;
var x=[];
var y=null;
var i=n;
var s=100;
var w=1;
var t=0;

while (i--) x.push(20);

function arrange(t){
y= x.map(function(x){
return s * Math.sin( w * x + t );
});
};

function render(){
sintext.setAttribute('dx', x.join(' '));
sintext.setAttribute('dy', x.join(' '));
}
render();

</script>
</body>
</html>; 2014-10-23 2回答·1141浏览