SVG, du texte , des polices à largeur fixe/hauteur

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

Mais il y a un vide de l'écart à la 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>

Ce que les sélecteurs CSS, dois-je utiliser pour le "texte" de l'élément ?

Remarque: je ne veux pas utiliser le texte sur un chemin de méthode. Juste une police de taille fixe.

Grâce;

OriginalL'auteur Pierre | 2009-11-13

  1. 8

    La taille d'une police détermine son hauteur, non pas de sa largeur; et les personnages sont rarement carré.

    Pour autant que je sache, il n'y a aucun moyen de déterminer la largeur de la même monospace texte de façon fiable grâce à CSS.

    Bien, CSS3 a la ch unité, qui est la largeur de la 0 caractère. Qui travaillent pour l'monospace texte. Mais il n'est pas pris en charge dans le format 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 à chasse fixe fixe la largeur peut être éteint. Si vous ajoutez le font-family:monospace;font-size:100px; sur le <rect> trop, vous pouvez définir la largeur du rectangle dans ems. Mais je ne pense pas que c'est plus fiable.

    Vous pouvez, cependant, utiliser des scripts. Vous pouvez utiliser getComputedTextLength() pour obtenir la longueur du texte d'un élément de texte:

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

    Ajoutant qu'à la fin de votre SVG (et l'ajout de l'élément Id) travaille dans Opera 10, Firefox 3.5 et Safari 4.0, au moins.

    Et pendant que vous y êtes, vous pourriez utiliser getBBox() trop, pour obtenir le texte de l'élément de délimitation de zone de sorte que vous pouvez régler la hauteur du rectangle pour correspondre à la taille de la police aussi, dans le cas où vous décidez de changer la taille de la police.

    OriginalL'auteur mercator