2011-01-16 8 views
1

In SVG (für Webbrowser), wenn ich ein <text> -Element hinzufüge und etwas Text hinzufüge, ändert sich die gesamte gerenderte Breite der Textzeichenfolge abhängig von der Skalierung der Text.SVG-Text - Gesamtlänge ändert sich abhängig vom Zoom

Sagen wir, ich füge "mmmmmmmmmmmmmmmmmmmmmmmmmmA" als Text, dann möchte ich eine vertikale Linie (oder andere genau positionierte Element) schneiden das letzte Zeichen. Funktioniert gut, aber wenn ich verkleinern, wird der Text kürzer oder länger und die Linie wird den Text nicht mehr an der richtigen Stelle schneiden. Der Fehler kann bis zu 5 Zeichen betragen, was nicht akzeptabel ist. Der Fehler ist auch unvorhersehbar, 150% und 160% Zoom können 3 Zeichen Länge hinzufügen, während 155% 2 Charlenlängen kürzer ist.

Mein Zoom ist als Maßstab-Transformation auf dem Stammelement meiner Leinwand, die eine <g> ist implementiert. Ich habe versucht, die Schriftgröße mit 1000x zu multiplizieren und gleichmäßig auf die Zoom-Transformation und umgekehrt zu skalieren, falls es sich um einen Gleitkommafehler handelte, aber das Ergebnis ist das gleiche.

Ich fand die textLength -Attribut [1], die die Gesamtlänge anpassen soll, so dass der Text immer enden wo ich wähle, aber es funktioniert nur in Webkit. Firefox und Opera scheinen sich überhaupt nicht um diesen Wert zu kümmern (habe noch nicht im IE9 versucht).

Gibt es eine Möglichkeit, Text exakt positioniert zu positionieren, ohne auf das selbstständige Füllen von Font-Outlines zurückgreifen zu müssen?

[1] http://www.w3.org/TR/SVG11/text.html#TextElementTextLengthAttribute

aktualisieren

Snippet der Struktur i bin mit

<svg> 
<g transform="scale(1)">  <!--This is the root, i'm changing the scale of this element to zoom --> 
    <g transform="scale(0.014)"> <!--This is a wrapper for multi-line text, scaling, other grouping etc --> 
     <text font-size="1000" textLength="40000">ABDCDEFGHIJKLMNOPQRSTUVXYZÅÄÖabcdefghijklmnopqrstxyzåäö1234567890</text> 
    </g> 
</g> 

Antwort

1

Interessant, da die webkit baut ich habe scheinen zum Scheitern verurteilt textLength (w3c testcase). Könnten Sie Ihr Beispiel veröffentlichen?

Für Opera sprechen wir das 'textLength' Attribut, wie dokumentiert here dokumentiert.

Die andere Option, die Sie haben, ist die Verwendung der getBBox method, um eine gute Position zum Zeichnen Ihrer Linie zu finden, die in allen Browsern funktionieren sollte.

+0

Habe noch einen Test mit Opera gemacht und es scheint "fast" dort zu arbeiten. Wenn ich textLength einstelle, wird der Text so skaliert, dass er fast den endgültigen Ort erreicht. Zum Beispiel wird 2x länger 2x länger aussehen, aber das Hinein- und Herauszoomen verschiebt sich vielleicht noch um +/- 3 Zeichen Breite. Build 1156. Siehe Beispiel in Update. – skco

+0

BTW, der von Ihnen gesendete Testfall funktioniert in der neuesten Benutzerversion von Chrome einwandfrei. – skco

+0

Fühlen Sie sich frei, eine E-Mail mit einem vollständigen Testfall an [email protected] zu senden, und wir überlegen uns, sie der W3C-Svg-Testsuite hinzuzufügen. –

Verwandte Themen