当字体不是SVG时，SVG中的动态文本出现问题

Question

所以，我有一个图形自动化链，它使用programmaticaly生成/更改的SVG和PhantomJS（目前是1.9.0）作为最终渲染引擎，在无头的linux环境中愉快地运行。我有一些动态文本替换要求，以及由此产生的动态字体缩放和调整需求...我一直在使用嵌入式SVG字体和一些糟糕的嵌入式javascript，除了两件事情外，它工作得很好：

1）客户端对带有连字的字体有一些请求（SVG字体格式不支持，因为它只是将每个字符作为svg元素引用）

2）我们正在开始实时预览选项，并希望能够将SVG提供给网页，而无需事先在我们的服务器上呈现png / jpeg /。保持负载，使客户端CPU完成繁重的工作。

为了解决这些问题，我一直在使用WOFF字体，因为对SVG字体的支持从来都不是很好，现在Chrome不再支持它们，只需切换到Blink引擎，如果我希望客户端做我的工作，我需要与尽可能多的常见浏览器兼容的东西......

所以问题就出现了：当我使用WOFF（或OFT或TTF）字体和@ font-face函数时，我的自动缩放失败了。

我一直在做的只是在我的图形中将SVG字体嵌入到defs中，并像任何其他SVG元素一样使用DOM引用。当与这样的java脚本结合使用时，这就是我期望和需要的东西：

<script id="multiscaler1" type="text/javascript">
    var texta = document.getElementById(&quot;text8093&quot;);
    var textb = document.getElementById(&quot;text8100&quot;);
    var textpatha = document.getElementById(&quot;textPath8097&quot;);
    var textpathb = document.getElementById(&quot;textPath8104&quot;);
    var patha = document.getElementById(&quot;path8091&quot;);
    var pathb = document.getElementById(&quot;path8089&quot;);
    var charcounta = textpatha.getNumberOfChars();
    var charcountb = textpathb.getNumberOfChars();
    var fontsizea = 10;
    var fontsizeb = 10;
    var offseta = -13;
    var offsetb = -13;
    var spacing = 0;
    while ( ((textpatha.getComputedTextLength() + (spacing * charcounta)) &lt; patha.getTotalLength()) &amp;&amp; (fontsizea &lt; 43) )
    {
        fontsizea += .5;
        offseta += 0.2
        textpatha.setAttribute(&quot;font-size&quot;, fontsizea);
        texta.setAttribute(&quot;transform&quot;, &quot;translate(&quot; + offseta + &quot;,0)&quot;);
    }
    while ( ((textpathb.getComputedTextLength() + (spacing * charcountb)) &lt; pathb.getTotalLength()) &amp;&amp; (fontsizeb &lt; 43) )
    {
        fontsizeb += .5;
        offsetb += 0.2
        textpathb.setAttribute(&quot;font-size&quot;, fontsizeb);
        textb.setAttribute(&quot;transform&quot;, &quot;translate(&quot; + offsetb + &quot;,0)&quot;);
    } 
</script>

相当废话，我知道，但我是制作经理和图形艺术家，而不是编码员：P看起来像这样：

这就是我想要的......（但当然只适用于支持SVG字体的浏览器......）

现在，当我把这个小美女添加到我的deffs时

<style type="text/css">
@font-face {
  font-family: Narrow-Bold;
  src: url('WOFFFONTS/Narrow-Bold.woff');
}
</style>

并删除我得到的SVG字体数据：

亲爱的，亲爱的。那根本不对。我用我的间距值（这是为了处理我根据字符串长度改变字符间距以最大化字体大小的另一种情况......）并且可以让它做到这一点：

也很错误：/

这里给出了什么？有帮助吗？坦率地说，将所有转换为WOFF（或@ font-face链接的OTF或TTF字体，BTW，做同样的事情）字体是很可爱的，因为我没有20,000+行SVG在该死的地方嵌入字体...

我尝试过不同的字体转换工具，甚至是我在一些谷歌搜索结果中发现的技巧，其中你从SVG构建WOFF，而不是TTF或OTF ...相同的结果。

...

以下是使用免费Delicious Bold字体嵌入SVG字体的工作自包含SVG的简化示例。显然，这只适用于支持SVG字体的浏览器。嵌入式字体是通过使用FontForge For Windows Release 2015-06-12重新下载OTF创建的。我还以相同的方式创建了WOFF version of the same font（所有默认设置，忽略了关于＆＃34的警告;非标准ems advance＆＃34;在TTF定义中）并添加了一个不同名称的@ font-face链接当它与SVG位于同一目录时，它将指向WOFF。通过编辑font-face =＆＃34; xxxxxx＆＃34;在SVG的text / textpath元素中，您可以快速切换嵌入的SVG字体（工作正常）链接的WOFF字体（可以正确缩放）和字体系列的系统版本（如果已安装）（可能需要注意，渲染与嵌入式SVG字体略有不同，但也可以正确缩放）

此行为在所有经过测试的浏览器中都是一致的（Opera-latest适用于Windows 7 64位，Mozilla Firefox-最新Linux Ubuntu 14，Chrome最新Windows 7/8 64位，Safari 5.1.7 for Windows（支持SVG字体）），以及PhantomJS 1.9.7 Linux CentOS 6.4 final（支持SVG字体）。它在所有测试的字体（很多......）和字体转换引擎（squirrel-font，FontForge，Birdfont ......）中也是一致的。

由于自包含的SVG太大而无法粘贴到身体中，因此a link to it pasted into a JSfiddle project。

是的，我确实意识到我可以通过使用Apache蜡染渲染来解决这个问题，但是： 1）蜡染是slooooooooooooow。 Sooooo sloooooooooooooooooooooooooow ... OMG很慢。 2）我希望能够尽可能多地从我的服务器上卸载CPU负载，蜡染将会做什么的确切反转 3）这不是重点，该死！

编辑：Firefox 38窗口现在似乎正确呈现WOFF缩放，但仅在重新加载页面后。哎呀。这意味着这可能都与渲染引擎的问题有关......