SVG, texte, police avec largeur/hauteur fixe

Question

J'essaie d'obtenir un élément SVG 'text' à l'intérieur d'un élément svg 'rect'. par exemple. Dans l'exemple ci-dessous, j'ai utilisé un texte monospace de 5 caractères avec une taille de police de 100 px et je m'attendais à avoir un rectangle de délimitation proche du texte.

Mais il y a un espace vide à droite du texte.

<svg xmlns="http://www.w3.org/2000/svg" height="200" width="1000"> 
    <text x="10px" y="110px" style="font-family:monospace;font-size:100px;">HELLO</text>  
    <rect x="10px" y="10px" width="500px" height="100px" style="stroke:blue;fill:none;"/> 
</svg> 

Quels sélecteurs CSS dois-je utiliser pour l'élément 'text'?

Remarque: Je ne souhaite pas utiliser la méthode text-on-path. Juste une police avec une taille fixe.

Merci;

Answer 1

La taille d'une police détermine la taille hauteur, et non sa largeur; et les caractères sont rarement carrés. Donc, autant que je sache, il n'y a aucun moyen de déterminer la largeur du texte même monospace de manière fiable à travers CSS.

Eh bien, CSS3 a le ch unit, qui est la largeur du caractère 0. Cela fonctionnerait pour le texte monospace. Mais ce n'est pas supporté en SVG.

Vous pouvez simplement définir une largeur fixe en pixels, bien sûr. Une largeur de 300 pixels fonctionne pour moi. Mais alors, si quelqu'un d'autre utilise une police monospace différente, cette largeur fixe peut être désactivée. Si vous ajoutez le font-family:monospace;font-size:100px; sur le <rect> aussi, vous pouvez définir la largeur du rectangle dans em s. Mais je ne pense pas que ce soit plus fiable.

Vous pouvez toutefois utiliser des scripts. Vous pouvez utiliser getComputedTextLength() pour obtenir la longueur du texte d'un text element:

<script type="text/javascript"> 
document.getElementById('rect').setAttribute(
    'width', 
    document.getElementById('text').getComputedTextLength() 
); 
</script> 

Ajout à la fin de votre SVG (et en ajoutant l'élément approprié ID) fonctionne dans Opera 10, Firefox 3.5 et Safari 4.0, au moins. Et pendant que vous y êtes, vous pouvez également utiliser getBBox() pour obtenir la boîte englobante de l'élément de texte afin que vous puissiez définir la hauteur du rectangle pour qu'elle corresponde à la taille de la police, au cas où vous décidiez de changer la police Taille.