Question

我正在svg转换中实施xslt。作为其中的一部分，我必须在一个盒子里放一个网址。但是，该框只能是一定的宽度，所以我在javascript中编写了一个用于自动换行的函数，因为SVG不支持自动换行。基本上，javascript将字符串拆分为五个部分，并将它们放在不同的tspan元素中。但是，在每个tspan元素的末尾，出现一个空格。这使得复制和粘贴链接变得不可能，这实际上是信息URL的功能。如何摆脱这个空白区域？

我是SVG和XSLT的新手。

这是javascript自动换行功能：

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);        
  }
}

这是它所引用的SVG（在xslt转换中）：

<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>

我会非常感谢任何有帮助的人！

如何摆脱出现在svg中Tspan元素末尾的空格？

0 个答案: