带有嵌入式javascript的SVG中的动态文本比例和kern

Question

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

<script id="script5413" type="text/javascript">var textpath = document.getElementById(&quot;textPath3098&quot;);
        var path = document.getElementById(&quot;path3069&quot;);
        var fontsize = 100;
        var spacingsender = 0;
        do  {
            fontsize += 0.5;
            textpath.setAttribute(&quot;font-size&quot;, fontsize);
            var spacing = -26;
            textpath.setAttribute(&quot;letter-spacing&quot;, spacing);
        while ( (textpath.getComputedTextLength() &lt; path.getTotalLength()) &amp;&amp; (spacing &lt; 0) )  {
            spacing += 0.5;
            textpath.setAttribute(&quot;letter-spacing&quot;, spacing);
            } 
        } while ( (textpath.getComputedTextLength() &lt; path.getTotalLength()) &amp;&amp; (fontsize &lt; 210) )
        </script>

我认为应该发生的事情：

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

实际发生的事情： 有4个字符：最大字体大小（210），字体间距为0.远不及路径长度。

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

有10个字符：barf！ font-size大于100，但字母间距为-26，我们远低于路径长度。

有15个字符的人：更糟糕的是。 font-size现在是100，字母间距是-26，WELL低于引导路径长度......

任何人都能帮我弄清楚这里发生了什么？ *在Chrome 37.0.2062.103 m和PhantomJS 1.9.7上测试。最终解决方案需要在PhantomJS上正确运行。

Answer 1

是的，这是：两部分失败：

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>

以及一些示例结果：

现在你（我）知道了！