javascript - How do I get rid of blank spaces that appear at the end of Tspan elements in svg? -
i'm implementing svg
in xslt
transformation. part of this, have put url in box. however, box can width, wrote function in javascript word wrapping, since svg doesn't support word wrapping. basically, javascript splitting string 5 sections , putting them in different tspan
elements. however, @ end of each tspan
element, blank space appearing. makes copying , pasting link impossible, function of info url. how rid of blank space?
i'm new svg , xslt.
here's javascript word wrapping function:
function wrapurltext(url){ var char=""; var urlstring = url; var bufferstring =""; var stringlength = urlstring.length; var bufferstringlength=stringlength; var charcaps=""; var charsize=0; var tempstringsize=0; var i=0; var j=0; while (j<5) { charsize=0; tempstringsize=0; bufferstring=""; i=0; while (i<bufferstringlength) { char = urlstring.charat(i); charcaps = char.touppercase(); if (char >= '0' && char <= '9') { charsize=6.5; } else if (char==charcaps) { charsize=11.5; } else if (char!=charcaps) { charsize=8.6; } else charsize=5; tempstringsize += charsize; if (tempstringsize<=400) { bufferstring=bufferstring.concat(char); } if (i==stringlength) { return; } if (tempstringsize>400) { bufferstring=bufferstring.concat(char); i++; break; } i++; } j++ $('#urltext'+j).text(bufferstring); urlstring= urlstring.substring(i,stringlength); } }
here's svg it's referring (in xslt
transformation):
<g> <rect id="infourl" width="400" height="120" x="35" y="270" fill="#ececec" stroke="#cccccc" rx="3" ry="3"/> <text id="urltext" class="infoitems" text-anchor="left" style="font-family: arial; font-size:16; stroke: #333333; fill:#333333;" x="40" y="290"> <tspan id="urltext1" class="infoitems" text-anchor="left" style="font-family: arial; font-size:16; stroke: #333333; fill:#333333;" x="40" y="290" /> <tspan id="urltext2" class="infoitems" text-anchor="left" style="font-family: arial; font-size:16; stroke: #333333; fill:#333333;" x="40" y="310" /> <tspan id="urltext3" class="infoitems" text-anchor="left" style="font-family: arial; font-size:16; stroke: #333333; fill:#333333;" x="40" y="330" /> <tspan id="urltext4" class="infoitems" text-anchor="left" style="font-family: arial; font-size:16; stroke: #333333; fill:#333333;" x="40" y="350" /> <tspan id="urltext5" class="infoitems" text-anchor="left" style="font-family: arial; font-size:16; stroke: #333333; fill:#333333;" x="40" y="370" /> </text> </g>
i grateful can help!
Comments
Post a Comment