SVG, text , schriftart mit fester Breite/Höhe

Ich versuche eine SVG 'text' - element Montage innerhalb eines svg 'rect' - element. Im Beispiel unten habe ich eine monospace-text 5 chars mit einer font-Größe von 100px und ich erwartete, haben ein umschließendes Rechteck nahe an den text.

Aber es ist eine leere Lücke auf der rechten Seite der text.

<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>

Welche CSS-Selektoren sollte ich für den 'text' - element ?

Anmerkung: ich don ' T wollen, verwenden Sie die text-auf-Pfad-Methode. Nur eine schriftart mit einer festen Größe.

Dank;

InformationsquelleAutor Pierre | 2009-11-13
  1. 8

    Die Größe der schriftart bestimmt seine Höhe, nicht die Breite; und Zeichen werden nur selten Platz.

    Also soweit ich weiß, gibt es keinen Weg, um zu bestimmen, die Breite auch monospace-text zuverlässig durch CSS.

    Gut, CSS3 hat die ch unit, die die Breite des 0 Charakter. Das würde die Arbeit für die monospace-text. Aber es ist nicht unterstützt in SVG.

    Könnte man einfach eine Feste Breite in Pixel, natürlich. Eine Breite von 300 Pixeln arbeitet für mich. Aber dann, wenn jemand verwendet eine andere Monospace-schriftart mit fester Breite werden könnten, aus. Wenn Sie fügen Sie die font-family:monospace;font-size:100px; auf die <rect> zu, können Sie die Breite des Rechtecks in ems. Aber ich glaube nicht, dass mehr zuverlässig.

    Sie können jedoch, verwenden Sie scripting. Sie können getComputedTextLength(), um den text Länge des text-element:

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

    Hinzufügen, dass am Ende des SVG (und um die entsprechende element-IDs) funktioniert in Opera 10, Firefox 3.5 und Safari 4.0, mindestens.

    Und während Sie gerade dabei sind, könnten Sie getBBox() zu gehen, um den text-element bounding-box so können Sie die Höhe des Rechtecks entsprechen die Schriftgröße, falls Sie jemals entscheiden, um die Schriftgröße zu ändern.

    InformationsquelleAutor mercator
Schreibe einen Kommentar