我想分割用户在输入文本框中输入的文本并附加到 svg 文本的 tspan 中
示例:
<input type="text" autofocus/>
输入的文本例如:“我有一些文本在此容器中换行成三行”
我想让我的 jquery/javascript 解析这些行并将其变成这样:
<text text-anchor="start" y="152">
<tspan x="212" dy="-15">I have some text that</tspan>
<tspan x="212" dy="20">wraps onto three </tspan>
<tspan x="212" dy="22">lines in this container</tspan>
</text>
注意:文本将根据 svg 形状的宽度减去 5px 进行分割,以将文本保留在边框内
到目前为止我尝试过这个:
var output;
window.onchange = onchange;
function onchange(e)
{
output = e.target.value;
var width = e.target.value.length;
var element = document.getElementById("text");
var height = element.clientHeight;
console.log("Width of text:" + width);
console.log("Height of text:" + height);
console.log("Text entered: " + output);
var words = output.split(/[ ,]+/);
console.log(words );
e.target.value = '';
}
var el = document.getElementById("rect"); // or other selector like querySelector()
var rect = el.getBoundingClientRect(); // get the bounding rectangle
console.log("Width of rect: " + rect.width);
console.log("Height of rect: " + rect.height);
$("input[type='text']").bind('keydown', function () {
$(this).attr("size", Math.max(5, $(this).val().length));
});
最佳答案
尝试下划线模板,看起来你让这个变得比它需要的更复杂(我也这样做;所以我知道)
关于jquery - 如何拆分输入值并插入到 tspan 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31730612/