SVG中嵌入javascript的动态文本缩放和内核

以下脚本作为动态图形生产自动化过程的一部分嵌入到SVG中。我试图动态调整字体大小和间距，以适应可变的文本元素。最小字体大小为100px，最大为210，最小间距为-26，最大为0。我试图避免字母重叠（这将出现在最小字体大小和间距，甚至有点超出，但是变量文本永远不会足够长，我认为我的循环也应该防止这种情况发生…）

var textpath=document.getElementById（“textPath3098”）；
var path=document.getElementById（“path3069”）；
var-fontsize=100；
var spacingsender=0；
做{
fontsize+=0.5；
setAttribute（“字体大小”，fontsize）；
var间距=-26；
setAttribute（“字母间距”，间距）；
while（（textpath.getComputedTextLength（）path.getTotalLength（））&；（间距0））{
间距+=0.5；
setAttribute（“字母间距”，间距）；
} 
}while（（textpath.getComputedTextLength（）path.getTotalLength（））&；（fontsize 210））

我认为应该发生的事情：

字体大小从100px开始，如果textpath.getComputedTextLength的值小于path.getTotalLength的值，则添加并设置.5，然后将字体间距设置为-26px，然后字体间距以.5的增量增加，直到字体间距的值达到0或计算的长度大于引导路径的长度。。。然后，它应该检查文本长度是否仍然小于引导路径，如果是，则在字体大小上再添加一个.5，并重复字母间距循环。。。从逻辑上看，这将产生尽可能大的字体，字母间距不小于符合路径的-26px

实际发生的情况： 包含4个字符：最大字体大小（210），字体间距为0。很短的路径长度。

有9个字符：看起来仍然像最大字体大小和间距，非常接近最大路径长度。

共10个字符：barf！字体大小大于100，但字母间距为-26，并且我们的路径长度远低于此值。

15个字符：更糟。字体大小现在是100，字母间距是-26，远低于引导路径长度。。。

有人能帮我弄清楚这是怎么回事吗？

---

*在铬37.0.2062.103 m和PhantomJS 1.9.7上测试。最终的解决方案需要在PhantomJS上正确运行。

是的，这里是：两部分故障：

1） 看起来，

getComputedTextLength（）

，尽管它声称在其前向跟踪计算中包含了字距调整和字母间距调整，但实际上并没有这样做

我必须计算字符串中的字符数，并将字符数和字母间距值的乘积添加到ComputedTextLength中，以获得渲染文本长度的正确值

2） 反正我的循环没有在正确的地方断开

以下是工作代码：

  <script id="experimentalscaler2" type="text/javascript">
        var textpath = document.getElementById(&quot;textPath3098&quot;);
        var charcount = textpath.getNumberOfChars();
        var path = document.getElementById(&quot;path3069&quot;);
        var charval = document.getElementById(&quot;charvaltext&quot;);
        var spaceval = document.getElementById(&quot;spacevaltext&quot;);
        var fontval = document.getElementById(&quot;fontsizetext&quot;);
        var fontsize = 100;
        var spacing = -20;
        charval.textContent = &quot;Charcount= &quot; + charcount;
        for (fontsize = 100; fontsize &lt; 210; fontsize += 0.5) {
            textpath.setAttribute(&quot;font-size&quot;, fontsize);
            spacing = -20;
            textpath.setAttribute(&quot;letter-spacing&quot;, spacing);
        if ( (textpath.getComputedTextLength() + (spacing * charcount)) &gt;= path.getTotalLength()  ) {
            break;
            }
        while ( ((textpath.getComputedTextLength() + (spacing * charcount)) &lt; path.getTotalLength() ) &amp;&amp; (spacing &lt; 0) )
            {
            spacing += 0.5;
            textpath.setAttribute(&quot;letter-spacing&quot;, spacing);
            }
        }
        spaceval.textContent = &quot;Spacing= &quot; + spacing;
        fontval.textContent = &quot;Font-size= &quot; + fontsize;
  </script>

var textpath=document.getElementById（“textPath3098”）；
var charcount=textpath.getNumberOfChars（）；
var path=document.getElementById（“path3069”）；
var charval=document.getElementById（“charvaltext”）；
var spaceval=document.getElementById（“spacevaltext”）；
var fontval=document.getElementById（“fontsizetext”）；
var-fontsize=100；
var间距=-20；
charval.textContent=“Charcount=”+Charcount；
用于（fontsize=100；fontsize 210；fontsize+=0.5）{
setAttribute（“字体大小”，fontsize）；
间距=-20；
setAttribute（“字母间距”，间距）；
如果（（textpath.getComputedTextLength（）+（spacing*charcount））=path.getTotalLength（））{
打破
}
while（（textpath.getComputedTextLength（）+（spacing*charcount））path.getTotalLength（））和（spacing 0））
{
间距+=0.5；
setAttribute（“字母间距”，间距）；
}
}
spaceval.textContent=“Spacing=”+间距；
fontval.textContent=“Font size=”+fontsize；

以及一些示例结果：

现在你（和我）知道了

  <script id="experimentalscaler2" type="text/javascript">
        var textpath = document.getElementById(&quot;textPath3098&quot;);
        var charcount = textpath.getNumberOfChars();
        var path = document.getElementById(&quot;path3069&quot;);
        var charval = document.getElementById(&quot;charvaltext&quot;);
        var spaceval = document.getElementById(&quot;spacevaltext&quot;);
        var fontval = document.getElementById(&quot;fontsizetext&quot;);
        var fontsize = 100;
        var spacing = -20;
        charval.textContent = &quot;Charcount= &quot; + charcount;
        for (fontsize = 100; fontsize &lt; 210; fontsize += 0.5) {
            textpath.setAttribute(&quot;font-size&quot;, fontsize);
            spacing = -20;
            textpath.setAttribute(&quot;letter-spacing&quot;, spacing);
        if ( (textpath.getComputedTextLength() + (spacing * charcount)) &gt;= path.getTotalLength()  ) {
            break;
            }
        while ( ((textpath.getComputedTextLength() + (spacing * charcount)) &lt; path.getTotalLength() ) &amp;&amp; (spacing &lt; 0) )
            {
            spacing += 0.5;
            textpath.setAttribute(&quot;letter-spacing&quot;, spacing);
            }
        }
        spaceval.textContent = &quot;Spacing= &quot; + spacing;
        fontval.textContent = &quot;Font-size= &quot; + fontsize;
  </script>