SVG Scale

[Alice]

Hallo Leute.

Ich verwenden den Befehl "scale" in einer SVG-Datei:

<g transform="scale(.5)">
   <image x="0" y="0" ... />
</g>

Die Grafik wird auch richtigerweise verkleinert (skaliert).

Mein Problem:
Das restliche SVG-Dokument behält jedoch die alten Proportionen. Selbst wenn ich den Scale-Tag direkt in den SVG-Tag-Bereich einfüge.

Was muss ich denn anstellen, damit das gesamte "Paket" skaliert wird?

 

[Martin Honnen]

Du wirst alles, was skaliert werden soll, innerhalb des "g"-Elementes mit dem 'transform="scale(.5)"'-Attribut packen müssen. Das "transform"-Attribut kann laut http://www.w3.org/TR/SVG11/attindex.html für folgende Elemente verwendet werden: "‘a’, ‘circle’, ‘clipPath’, ‘defs’, ‘ellipse’, ‘foreignObject’, ‘g’, ‘image’, ‘line’, ‘path’, ‘polygon’, ‘polyline’, ‘rect’, ‘switch’, ‘text’, ‘use’". So du es mit einem "svg"-Element versucht hast, hat das keine Bedeutung für den Browser.

 

[Alice]

Danke für die Antwort!

Das sklallieren funktioniert perfekt. Ich habe es in das G-Element eingebaut.

Mein Problem ist das SVG-Elelemt. Dieses behält seine Grösse, was ich jedoch nicht möchte. Das SVG-Element soll auch kleiner werden.

Meine Idee war: Mit Javascript die Propertionen vom G-Element auszulesen (im skallierten Zustand) und Breite und Höhe im SVG-Element zu ändern. Aber ich schaffe es nicht. Daher suche ich eine andere Möglichkeit.

Einfaches Beispiel:
Die SVG-Grafik (Dokument) ist 3000px Breit und 3000px Hoch. Eine beliebie Grafik ist auch 3000px Breit und 3000px Hoch. Nun skalliere ich die Grafik (befindet sich im G-Element) mit scale(.5). Dann ist die Grafik im G-Element nur noch 1500px x 1500px Groß. Das ist auch genau was ich möchte. Aber die SV-Grafik selbst, also das SVG-Element ist immer noch 3000px x 3000px Groß und das möchte ich nicht. Das SVG-Element soll auch kleiner werden.

 

[Alice]

Niemand eine Idee oder so?