フォントがSVGでない場合のSVGのダイナミックテキストの問題

したがって、私は、プログラムによって生成/変更されたSVGとPhantomJS（現在1.9.0）を最終的なレンダリングエンジンとして使用して、ヘッドレスLinux環境で問題なく実行されているグラフィックスオートメーションチェーンを持っています。動的テキストの置換要件があり、その結果動的フォントのスケーリングと調整のニーズがあります...私は埋め込みSVGフォントといくつかのくだらない埋め込みJavaScriptを使用してきましたが、次の2つを除いて正常に機能します。

1）クライアントは合字のフォントを要求します（SVGフォント形式はサポートしていません）。

2）ライブプレビューオプションを検討しています。事前にサーバー上でpng / jpeg /をレンダリングせずに、SVGをWebページまで提供できるようにしたいと考えています。負荷を抑え、クライアントのCPUに負荷のかかる処理をすべて実行させます。

これらの問題のために、SVGフォントのサポートがそれほど良くなかったため、WOFFフォントをいじってみました。クライアントが必要な場合は、Blinkエンジンに切り替えると、Chromeでこれらのフォントがサポートされなくなります。できる限り多くの一般的なブラウザと互換性のあるものが必要です...

だからここに問題があります：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フォントをサポートするブラウザでのみ機能します...）

今、私はこの小さな美しさを私の好みに加えるとき

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

そして、私がこれを取得したSVGフォントデータを削除します：

まあ。それはまったく正しくありません。私は自分の間隔の値を試してみました（文字列の長さに基づいてフォントサイズを最大化するために文字間隔を変更する別の状況に対処するためにあります...）、これを行うことができます：

また、かなり間違っています：/

ここで何が得られますか？何か助け？率直に言って、フォント全体を埋め込むことなく20,000以上のラインSVGをはるかに少なくするため、すべてをWOFF（または@ font-faceにリンクされたOTFフォントまたはTTFフォントですが、同じことを行います）フォントに切り替えるのは素晴らしいことです。いまいましい場所...

さまざまなフォント変換ツールを試しましたが、Googleの検索結果で見つかったトリックでさえ、TTFやOTFではなくSVGからWOFFを構築しました...同じ結果です。

??

以下は、無料のDelicious Boldフォントを使用して、SVGフォントが埋め込まれた自己完結型のSVGの簡単な例です。明らかに、これはSVGフォントをサポートするブラウザでのみ機能します。埋め込みフォントは、FontForge For Windowsリリース2015-06-12を使用したOTFの新規ダウンロードから作成されました。同じフォントのWOFFバージョンも作成しました同じ方法（TTF定義の「非標準emsアドバンス」に関する警告を無視してすべてのデフォルト設定）と同じディレクトリにある場合にWOFFを指す別の名前の@ font-faceリンクを追加SVG。SVGのtext / textpath要素のfont-face = "xxxxxx"を編集することで、埋め込まれたSVGフォント（正常に機能）、リンクされたWOFFフォント（正しくスケーリングされない）とシステムバージョンのフォントをすばやく切り替えることができます。ファミリ（インストールされている場合）（おそらく、埋め込まれたSVGフォントとは若干異なるが、正しくスケーリングされる）

この動作は、テスト済みのすべてのブラウザー（Windows 7 64ビットの場合はOpera-latest、Mozilla-Latest Linux Ubuntu 14、Chrome-latest Windows 7/8 64ビットの場合）、Windows（SVGフォントをサポート）のSafari 5.1.7、およびPhantomJS 1.9.7で一貫しています。 Linux CentOS 6.4 final（SVGフォントをサポート）。テストされたすべてのフォント（多く...）とフォント変換エンジン（squirrel-font、FontForge、Birdfont ...）でも一貫しています。

自己完結型のSVGは大きすぎて本体に貼り付けることができないため、JSfiddleプロジェクトに貼り付けたSVGへのリンクを次に示します。

はい、Apache batikを使用してレンダリングすることでこれを解決できると思いますが、1）Batikはslooooooooooooowです。Sooooo sloooooooooooooooooooooooooooow ... OMGは遅いです。2）CPUの負荷をできるだけサーバーからオフロードできるようにしたい、バティックが何をするかを正確に逆にしたい3）それはポイントではありません、damnit！

私はWebデザイナーなので、SVGを頻繁に使用しています。テキストの形（フォントスタイル）を維持したい場合は、Adobe Illustratorを開いて、必要なものを書き、そこから「アウトラインを作成」します。それほど時間はかかりません。編集可能なバージョンを維持するには、アウトラインの前にテキストをコピーしてください。