如何自动在svg svg中自动换行? [英] How to auto text wrap text in snap svg?
问题描述
使用以下插件和代码,您可以将文本包裹在\n
处:
Using the following plugin and code you could wrap text where there is \n
:
Snap.plugin(function (Snap, Element, Paper, glob) {
Paper.prototype.multitext = function (x, y, txt) {
txt = txt.split("\n");
var t = this.text(x, y, txt);
t.selectAll("tspan:nth-child(n+2)").attr({
dy: "1.2em",
x: x
});
return t;
};
});
//您可以像这样使用它:
// And you can use it like this:
var ttt = paper.multitext(100, 100, "Sample\nmultiline\ntext").attr({
font: "18px Arial",
textAnchor: "middle"
});
它会产生: http://jsbin.com/panaxujuta/1/edit? html,output
Smaple
multiline
text
如何使用rect Width作为长短语或段落的行数限制来自动执行此过程?我不想为了以后需要文本而在svg中使用foreignobject.请使用本机svg解决方案.任何想法将不胜感激.
How can I automate this process using a rect Width as the limit for the lines of a long phrase or paragraph ? I don't want to use the foreignobject in svg for the purpose that I need the text later on . A native svg solution please. Any ideas would be greatly appreciated.
编辑:如何在\n
上拆分而不是在文本行的特定宽度上拆分?
Edit: Instead of splitting on \n
how can we split on certain width of a line of a text?
Edit2 :我有使用上述插件的代码,为什么这样不起作用?:
Edit2: I have this code that uses the above plugin, why this wouldn't work?:
var phrase = "Etiam porttitor risus in ex blandit sodales. Ut cursus mi augue, sit amet interdum diam interdum sit amet. Nunc nec lectus ex.";
var textBoxWidth = 400;
var words = phrase.split(" ");
var newPhrase = words[0];
var t1 = paper.multitext(10,50,newPhrase)
.attr({
fill: "none",
stroke:"orange",
"text-anchor":"start",
"font-size":"18px",
"font-family":"Arial"});
for(i=1;i<words.length;i++){
t1.attr({"text":newPhrase + " " + words[i]});
if(t1.getBBox().width<=textBoxWidth){
newPhrase += " " + words[i];
} else {
newPhrase += " \n" + words[i] ;
}
}
推荐答案
感谢发布.我有一些按长度包装的代码,但是因为没有使用text()
的数组版本而遇到麻烦.
Thanks for posting this. I had some of the wrapping to length code, but was having trouble because I wasn't using the array version of text()
.
问题是您必须先了解字体大小,然后才能限制字符串.我能够根据您的代码进行此操作,并根据 https://stackoverflow.com/a/9899369/9970 来包装逻辑一个>.它并不完美,如果您缓存每种字体/大小的字母宽度,它可能会更快.
The issue is you have to know the font size before you can limit the string. I was able to make this based off your code and wrapping logic based off https://stackoverflow.com/a/9899369/9970. Its not perfect and could be faster if you cached the letter widths per font/size.
Snap.plugin(function (Snap, Element, Paper, glob) {
Paper.prototype.multitext = function (x, y, txt, max_width, attributes) {
var svg = Snap();
var abc = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
var temp = svg.text(0, 0, abc);
temp.attr(attributes);
var letter_width = temp.getBBox().width / abc.length;
svg.remove();
var words = txt.split(" ");
var width_so_far = 0, current_line=0, lines=[''];
for (var i = 0; i < words.length; i++) {
var l = words[i].length;
if (width_so_far + (l * letter_width) > max_width) {
lines.push('');
current_line++;
width_so_far = 0;
}
width_so_far += l * letter_width;
lines[current_line] += words[i] + " ";
}
var t = this.text(x,y,lines).attr(attributes);
t.selectAll("tspan:nth-child(n+2)").attr({
dy: "1.2em",
x: x
});
return t;
};
});
像这样使用
var bobo = paper.multitext(50, 50, "bobo bobo bobo bobo bobo bobo bobo bobo bobo", 150,
{ "font-size": "30px" });
这篇关于如何自动在svg svg中自动换行?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!