1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

SVG Scale

Dieses Thema im Forum "XML Technologien" wurde erstellt von Alice, 5. Mai 2013.

  1. Alice

    Alice Erfahrenes Mitglied

    Hallo Leute. :)

    Ich verwenden den Befehl "scale" in einer SVG-Datei:
    Code (Text):
    1. <g transform="scale(.5)">
    2.    <image x="0" y="0" ... />
    3. </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?
     
  2. Martin Honnen

    Martin Honnen Mitglied

    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.
     
  3. Alice

    Alice Erfahrenes Mitglied

    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.
     
  4. Alice

    Alice Erfahrenes Mitglied

    Niemand eine Idee oder so? :(