Nach ungefähr 48 Stunden Recherche habe ich dies getan, um eine proportionale Skalierung zu erhalten:
HINWEIS: Dieses Beispiel wurde mit React geschrieben. Wenn Sie nicht , dass sind, ändern Sie das Kamel Fall Sachen zurück zu Bindestriche (dh: Änderung backgroundColorzu background-colorund ändern Sie den Stil Objectauf eine Rückseite String).
<div
style={{
backgroundColor: 'lightpink',
resize: 'horizontal',
overflow: 'hidden',
width: '1000px',
height: 'auto',
}}
>
<svg
width="100%"
viewBox="113 128 972 600"
preserveAspectRatio="xMidYMid meet"
>
<g> ... </g>
</svg>
</div>
Folgendes passiert im obigen Beispielcode:
VIEWBOX
MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
min-x, min-y, Breite und Höhe
dh: viewbox = "0 0 1000 1000"
Viewbox ist ein wichtiges Attribut, da es der SVG grundsätzlich mitteilt, welche Größe wo gezeichnet werden soll. Wenn Sie CSS verwendet haben, um das SVG 1000x1000 px zu erstellen, Ihre Ansichtsbox jedoch 2000x2000 war, wird das obere linke Viertel Ihres SVG angezeigt .
Die ersten beiden Zahlen, min-x und min-y, bestimmen, ob die SVG innerhalb des Ansichtsfelds versetzt werden soll.
Mein SVG muss nach oben / unten oder links / rechts verschoben werden
Untersuchen Sie dies: viewbox = "50 50 450 450"
Die ersten beiden Zahlen verschieben Ihr SVG um 50 Pixel nach links und um 50 Pixel nach oben, und die zweiten beiden Zahlen haben die Größe des Ansichtsfelds: 450 x 450 Pixel. Wenn Ihre SVG-Datei 500 x 500 ist, aber zusätzliche Auffüllungen aufweist, können Sie diese Zahlen manipulieren, um sie in der "Ansichtsbox" zu verschieben.
Ihr Ziel an dieser Stelle ist es, eine dieser Zahlen zu ändern und zu sehen, was passiert.
Sie können das Ansichtsfeld auch vollständig weglassen, aber Ihr Kilometerstand hängt von jeder anderen Einstellung ab, die Sie zu diesem Zeitpunkt haben. Nach meiner Erfahrung treten Probleme beim Beibehalten des Seitenverhältnisses auf, da das Ansichtsfeld beim Definieren des Seitenverhältnisses hilft.
ASPEKTVERHÄLTNIS ERHALTEN
MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
Basierend auf meinen Recherchen gibt es viele verschiedene Einstellungen für das Seitenverhältnis, aber die Standardeinstellung wird aufgerufen xMidYMid meet. Ich lege es auf meine, um mich ausdrücklich daran zu erinnern. xMidYMid meetLässt es proportional zum Mittelpunkt X und Y skalieren. Dies bedeutet, dass es in der Ansichtsbox zentriert bleibt.
BREITE
MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width
Schauen Sie sich meinen Beispielcode oben an. Beachten Sie, wie ich nur Breite, keine Höhe einstelle. Ich habe es auf 100% gesetzt, damit es den Container füllt, in dem es sich befindet. Dies trägt wahrscheinlich am meisten zur Beantwortung dieser Frage zum Stapelüberlauf bei.
Sie können es auf einen beliebigen Pixelwert ändern, aber ich würde empfehlen, 100% zu verwenden, um die maximale Größe zu erreichen und es dann mit CSS über den übergeordneten Container zu steuern. Ich empfehle dies, weil Sie "richtige" Kontrolle erhalten. Sie können Medienabfragen verwenden und die Größe ohne verrücktes JavaScript steuern.
Skalieren mit CSS
Schauen Sie sich meinen Beispielcode oben noch einmal an. Beachten Sie, wie ich diese Eigenschaften habe:
resize: 'horizontal', // you can safely omit this
overflow: 'hidden', // if you use resize, use this to fix weird scrollbar appearance
width: '1000px',
height: 'auto',
Dies ist zusätzlich, zeigt Ihnen jedoch, wie Sie dem Benutzer erlauben können, die Größe des SVG zu ändern, während das richtige Seitenverhältnis beibehalten wird. Da das SVG sein eigenes Seitenverhältnis beibehält, müssen Sie nur die Breite des übergeordneten Containers ändern, und die Größe wird wie gewünscht geändert.
Wir lassen die Höhe in Ruhe und / oder stellen sie auf Auto ein und steuern die Größenänderung mit der Breite. Ich habe die Breite ausgewählt, weil sie aufgrund reaktionsschneller Designs oft aussagekräftiger ist.
Hier ist ein Bild dieser Einstellungen, die verwendet werden:
Wenn Sie jede Lösung in dieser Frage gelesen haben und immer noch verwirrt sind oder nicht genau wissen, was Sie brauchen, lesen Sie diesen Link hier. Ich fand es sehr hilfreich:
https://css-tricks.com/scale-svg/
Es ist ein riesiger Artikel, der jedoch so gut wie jede Möglichkeit zur Manipulation einer SVG mit oder ohne CSS aufschlüsselt. Ich empfehle es zu lesen, während Sie beiläufig einen Kaffee oder eine Auswahl ausgewählter Flüssigkeiten trinken.
