Comment obtenir une taille DIV exacte avec une largeur maximale définie pour simuler le flux de texte en SVG?

Question

J'essaie d'obtenir un flux de texte en SVG en utilisant l'élément SVG foreignObject qui encapsule un élément DOM DVI. Mon problème est quel ensemble de paramètres CSS, donc je peux utiliser le style fon-maily personnalisé.

J'utilise les étapes suivantes.

0. For defined 'maximal-width' value : 
1. Make a foreignObject at least max-width wide 
2. Put a DIV element inside with some text and max-width : 'maximal-width' style. 
3. Get it's size (width x height) and update the size of the foreignObject element in the end. 
4. Make some SVG rectangle in the background with the same size as the text/foreignObject element. 

résultat attendu est un texte enveloppé encapsulé dans l'élément foreignObject de même taille avec un rectangle SVG en arrière-plan qui a également la même taille.

MAIS

je reçois problème lors de l'utilisation display: block en ligne/en ligne avec différents paramètres de la famille de la police.

J'ai fait un petit exemple ici http://jsfiddle.net/zm7Xb/3/ et j'ai obtenu des résultats de propper en utilisant Chrome, affichage: CSS en ligne avec la police par défaut. L'utilisation de Helvetica donne un élément DIV qui est plus large que le texte à l'intérieur. Utiliser les résultats de google-police dans un résultat encore pire. Utilisation de l'affichage: inline fixe la largeur, mais entraîne une taille fausse verticale (hauteur). Même en utilisant la police par défaut.

Testé avec les mêmes résultats.

Je ne suis pas capable de voir où est le problème. Peut-être lié à celui-ci svg appending text element - gives me wrong width? Et plus important: que puis-je faire pour le réparer?

Answer 1

Il vous manque des tailles dans un certain nombre d'endroits, donc les choses n'ont pas de taille ou par défaut 300 x 150 pixels. Tout cela est conforme aux spécifications appropriées et Chrome à un moment donné le mettra en œuvre correctement et fera correspondre Firefox.

D'abord, vous devez ajouter ces styles à votre code.

html, body { 
    width: 100%; 
    height: 100%; 
} 

#svg_container { 
    width: 100%; 
    height: 100%; 
} 

Vous devez également définir une largeur/hauteur sur l'élément svg comme si ...

var svg = svgContainer.append("svg") 
    .attr('width', "100%") 
    .attr('height', "100%"); 

Which gives you this

Cela résout le second foreignObject manquant dans Firefox. En ce qui concerne les raisons pour lesquelles vous n'obtenez pas les tailles attendues, le chargement des polices est asynchrone, donc vous devez probablement mesurer le texte avant que la police voulue ne soit chargée. Il n'y a pas de moyen fiable de savoir si une police a été chargée, donc la méthode habituelle est de vérifier à intervalles réguliers jusqu'à ce que la taille du texte change.