SVG: ajouter des formes le long d'une trajectoire courbe

Question

Je suis actuellement dans une situation dans laquelle je dois ajouter du texte pour suivre un tracé courbe en SVG. Notre but est de permettre aux utilisateurs d'entrer dynamiquement du texte qui sera affiché le long d'un chemin incurvé. Normalement j'utiliserais le textPath method mais le hang-up est que-- pour que le texte soit rendu comme notre concepteur l'a spécifié-- nous devons convertir le texte en chemins (probablement en utilisant quelque chose comme Opentype). Je n'espérais pas que l'ajout de formes au textPath fonctionnerait (ce n'était pas le cas) mais je ne suis pas sûr de savoir où aller pour arriver au même résultat.

<svg viewBox="0 0 1000 300" 
xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink"> 

<defs> 
<path id="MyPath" 
    d="M 100 200 
    C 200 100 300 0 400 100 
    C 500 200 600 300 700 200 
    C 800 100 900 100 900 100" /> 
</defs> 

<use xlink:href="#MyPath" fill="none" stroke="red" /> 

<text font-family="Verdana" font-size="42.5"> 
<textPath xlink:href="#MyPath"> 
    <rect class="sq-1" height="50" width="50" x="0" y="0"/> 
    <rect class="sq-2" height="50" width="50" x="100" y="0"/> 
    <rect class="sq-3" height="50" width="50" x="200" y="0"/> 
</textPath> 
</text> 

<rect x="1" y="1" width="998" height="298" fill="none" stroke="black" stroke-width="2" /> 
</svg> 

Here is a fiddle pour l'exemple ci-dessus.

Answer 1

Il n'y a aucun moyen de le faire dans le navigateur - au moins pas intégré dans tous les cas. Comme je le vois, vos options sont:

1. espoir qu'il ya une bibliothèque Javascript qui il peut convertir un <textPath> à un <path>. Je n'en connais pas. JS n'a pas accès à la géométrie ou aux métriques de la police. La bibliothèque devrait analyser les polices elle-même.
2. trouver ou écrire une bibliothèque Javascript qui il peut distribuer <path> éléments le long d'un <path>
3. un script de post-traitement sur le serveur qui exécute le SVG par Inkscape, Illustrator, etc pour faire le convertir à chemin étape.