Wie kann ich ein SVG skalieren, sodass es mit seinem übergeordneten Container skaliert wird?

Question

Ich möchte, dass der Inhalt eines Inline-SVG-Elements skaliert, wenn die Größe nicht nativ ist. Natürlich könnte ich es als separate Datei haben und es auf diese Weise skalieren.

index.html:

foo.svg:

Ich möchte jedoch zusätzliche Styles zum SVG über CSS hinzufügen, daher ist das Verlinken einer externen Datei keine Option. Wie skaliere ich ein Inline-SVG?

Answer 1

Um die Koordinaten innerhalb des SVG-Bildes unabhhängig von der skalierten Größe des Bildes festzulegen, verwenden Sie das Attribut viewBox auf dem SVG-Element, um festzulegen, was die Begrenzungsbox des Bildes im Koordinatensystem des Bildes ist, und verwenden Sie die Attribute width und height, um festzulegen, was die Breite oder Höhe im Verhältnis zur enthaltenden Seite sind.

Zum Beispiel wird dies als ein 10px mal 20px Dreieck gerendert:

svg {
  border: 1px solid blue;
}

Wenn Sie nur die Breite und Höhe festlegen, ändert sich die Größe des SVG-Elements, aber das Dreieck wird nicht skaliert:

svg {
  border: 1px solid blue;
}

Wenn Sie den Ansichtsbereich festlegen, wird das Bild so transformiert, dass die angegebene Box (im Koordinatensystem des Bildes) auf die angegebene Breite und Höhe (im Koordinatensystem der Seite) skaliert wird. Zum Beispiel, um das Dreieck auf 100px mal 50px zu skalieren:

svg {
  border: 1px solid blue;
}

Wenn Sie es auf die Breite des HTML-Viewports skalieren möchten:

svg {
  border: 1px solid blue;
}

Beachten Sie, dass standardmäßig das Seitenverhältnis erhalten bleibt. Wenn Sie also festlegen, dass das Element eine Breite von 100% haben soll, aber eine Höhe von 50px, wird es tatsächlich nur bis zur Höhe von 50px skaliert (außer Sie haben ein sehr schmales Fenster):

svg {
  border: 1px solid blue;
}

Wenn Sie es tatsächlich horizontal strecken möchten, deaktivieren Sie die Beibehaltung des Seitenverhältnisses mit preserveAspectRatio=none:

svg {
  border: 1px solid blue;
}

Answer 2

Ich habe das gemacht, um eine proportionale Skalierung zu erreichen:

HINWEIS: Dieses Beispiel ist mit React geschrieben. Wenn du das nicht verwendest, ändere die camelCase-Sachen zurück in Bindestriche (z.B.: ändere backgroundColor in background-color und ändere den style Object zurück in einen String).

     ... 

Hier ist, was im obigen Beispielscode passiert:

VIEWBOX

MDN: https://developer.mozilla.org/de/docs/Web/SVG/Attribute/viewBox

min-x, min-y, Breite und Höhe

d.h. viewbox="0 0 1000 1000"

Viewbox ist ein wichtiges Attribut, da es dem SVG praktisch sagt, welche Größe es haben soll und wo. Wenn du CSS benutzt hast, um das SVG auf 1000x1000 px zu machen, aber dein viewbox 2000x2000 war, würdest du das obere linke Viertel deines SVG sehen.

Die ersten beiden Zahlen, min-x und min-y, bestimmen, ob das SVG innerhalb des viewbox verschoben werden soll.

Mein SVG muss hoch/runter oder links/rechts verschoben werden

Betrachte dies: viewbox="50 50 450 450"

Die ersten beiden Zahlen verschieben dein SVG um 50px nach links und 50px nach oben, und die beiden weiteren Zahlen sind die Größe des viewbox: 450x450 px. Wenn dein SVG 500x500 groß ist, aber etwas zusätzlichen Abstand hat, kannst du diese Zahlen manipulieren, um es innerhalb der "viewbox" zu bewegen.

Dein Ziel an diesem Punkt ist es, eine dieser Zahlen zu ändern und zu sehen, was passiert.

Du kannst die viewbox auch komplett weglassen, aber dann wird dein Erfolg je nach allen anderen Einstellungen, die du zu dem Zeitpunkt hast, variieren. Meiner Erfahrung nach wirst du Probleme mit der Erhaltung des Seitenverhältnisses haben, weil die viewbox hilft, das Seitenverhältnis zu definieren.

ERHALTEN DES SEITENVERHÄLTNISSES

MDN: https://developer.mozilla.org/de/docs/Web/SVG/Attribute/preserveAspectRatio

Basierend auf meiner Recherche gibt es viele verschiedene Einstellungen für das Seitenverhältnis, aber die Standard-Einstellung heißt xMidYMid meet. Ich habe es auf meine explizit gesetzt, um mich daran zu erinnern. xMidYMid meet lässt es proportional auf der Mittelachse X und Y skalieren. Das bedeutet, dass es zentriert in der viewbox bleibt.

BREITE

MDN: https://developer.mozilla.org/de/docs/Web/SVG/Attribute/width

Schaue dir meinen obigen Beispielcode an. Beachte, wie ich nur die Breite gesetzt habe, ohne Höhe. Ich habe es auf 100% gesetzt, damit es den Container ausfüllt, in dem es sich befindet. Dies trägt wahrscheinlich am meisten dazu bei, diese Stack Overflow Frage zu beantworten.

Du kannst es auf jeden Pixelwert ändern, den du möchtest, aber ich empfehle, wie ich es getan habe, 100% zu verwenden, um es auf maximale Größe aufzublasen und es dann mit CSS über den übergeordneten Container zu steuern. Ich empfehle das, weil du "richtige" Kontrolle bekommst. Du kannst Medienabfragen verwenden und die Größe ohne verrücktes JavaScript steuern.

SCHLICHTEN MIT CSS

Schau dir nochmal meinen obigen Beispielcode an. Beachte, wie ich diese Eigenschaften habe:

resize: 'horizontal', // du kannst dies sicherlich weglassen
overflow: 'hidden',   // wenn du resize benutzt, verwende dies, um das seltsame Erscheinungsbild der Scrollleiste zu beheben
width: '1000px',
height: 'auto',

Dies ist zusätzlich, aber es zeigt dir, wie du es dem Benutzer ermöglichen kannst, das SVG zu skalieren und dabei das richtige Seitenverhältnis beizubehalten. Da das SVG sein eigenes Seitenverhältnis beibehält, musst du nur die Breite auf dem übergeordneten Container skalierbar machen, und es wird wie gewünscht skaliert.

Wir lassen die Höhe unverändert und/oder setzen sie auf auto, und kontrollieren die Skalierung mit der Breite. Ich habe Breite gewählt, weil es aufgrund responsiver Designs oft sinnvoller ist.

Hier ist ein Bild dieser Einstellungen in Aktion:

Wenn du jede Lösung in dieser Frage gelesen hast und immer noch verwirrt bist oder nicht genau siehst, was du brauchst, dann schau dir diesen Link hier an. Ich fand ihn sehr hilfreich:

https://css-tricks.com/scale-svg/

Es ist ein umfangreicher Artikel, aber er zeigt praktisch jeden möglichen Weg, ein SVG zu manipulieren, mit oder ohne CSS. Ich empfehle, ihn zu lesen, während du entspannt einen Kaffee oder ein Getränk deiner Wahl genießt.

Answer 3

Sie möchten eine Transformation wie folgt durchführen:

mit JavaScript:

document.getElementById(yourtarget).setAttribute("transform", "scale(2.0)");

Mit CSS:

#yourtarget {
  transform:scale(2.0);
  -webkit-transform:scale(2.0);
}

Umschließen Sie Ihre SVG-Seite mit einem Gruppen-Tag und zielen Sie darauf ab, die gesamte Seite zu manipulieren:

    Ihre SVG-Seite

Hinweis: Skalierung 1.0 entspricht 100%

Answer 4

Ich habe herumgespielt & herausgefunden, dass dieses CSS anscheinend das SVG im Chrome-Browser enthält, bis der Container größer als das Bild ist:

div.inserted-svg-logo svg { max-width:100%; }

Scheint auch in FF + IE 11 zu funktionieren.

Answer 5

Hier ist ein einfacher Weg:

Typ 1: Die meisten SVGs haben eine Ansichtsbox, wie zum Beispiel:

Und Sie können ihre Größe ganz einfach mit CSS steuern:

svg {
  height: 20px;
}

Typ 2: Wenn das SVG eine Breite und Höhe hat, aber keine Ansichtsfläche, wie zum Beispiel:

Dann können Sie einfach manuell eine Ansichtsbox hinzufügen, die genau die gleiche Größe wie Breite und Höhe hat, wie zum Beispiel:

Dann können Sie dasselbe wie bei Typ 1 tun.