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

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，设置，然后font-spacing设置为-26px，如果textpath.getComputedTextLength的值小于path.getTotalLength的值，那么font-spacing 以 .5 的增量增加，直到 font-Spacing 的值达到 0 或计算的长度大于引导路径的长度......然后它应该检查文本长度是否仍然小于引导路径，如果是这样，请在字体大小中添加另一个 .5 并重复字母间距循环......从逻辑上讲，这似乎会产生字母间距不小于 -26px 的最大可能字体符合路径。

实际发生了什么:有 4 个字符:最大字体大小 (210)，字体间距为 0。路径长度很短。

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

有 10 个字符:barf!字体大小大于 100，但字母间距为 -26，我们远低于路径长度。

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

谁能帮我弄清楚这是怎么回事？*在 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>

和一些示例结果:

现在你(和我)知道了!