Ich habe ein SVG-Element definiert mit einer Breite und Höhe von "297mm" und "210mm", und keine Viewbox. Ich mache das, weil ich in einem A4-Ansichtsfenster arbeiten möchte, aber ich möchte Elemente in Pixeln erstellen.
Irgendwann muss ich ein in Pixel definiertes Objekt vergrößern, so dass es in einen Teil der A4-Seite passt. Zum Beispiel könnte ich ein Objekt haben, das 100 px breit ist, das ich horizontal auf 30 mm skalieren möchte.
Ist das möglich? Ich denke, ich brauche einen zweiten Container mit einem neuen Koordinatensystem, aber ich finde keinen Weg dazu.
BEARBEITEN
Es scheint, dass ich (oder SVG) missverstanden habe, was ein Pixel ist. Ich erkannte, dass ich eine Zeile auf 100% skalieren und dann die Pixelgröße mit getBBox ermitteln konnte, um die erforderliche Skalierung zu finden. Ich schrieb diesen Code und führte ihn auf 2 Clients aus, einen mit einem 1280x1024 Monitor (80dpi) und einen mit einem 1680x1050 LCD (90dpi):
IE9, FF, Opera und Chrome stimmen überein, dass beide Monitore 96 dpi horizontal und vertikal sind (obwohl Opera etwas ungenau ist), und Safari meldet 0 dpi auf beiden Monitore. Svg scheint also "Pixel" als "96dpi" definiert zu haben. etwas schnelles Googeln scheint dies zu bestätigen, obwohl ich nichts Definitives gefunden habe und die meisten Treffer 90dpi ergeben, mit 96dpi als FF-Variante.
Sie können <svg> -Elemente verschachteln und das Attribut "viewBox" für das untergeordnete Element verwenden, um ein neues Koordinatensystem zu erhalten. Geben Sie die untergeordneten Attribute <svg> x, y, width und height an der Stelle an, an der sie im übergeordneten Koordinatensystem des übergeordneten Systems angezeigt werden soll.
Tags und Links svg