it-swarm.com.de

Wie kann ich mit dem übergeordneten Container eine Svg-Skala erstellen?

Ich möchte den Inhalt eines Inline-Svg-Elements skalieren, wenn die Größe nicht nativ ist. Natürlich könnte ich es als separate Datei haben und so skalieren.

index.html: <img src="foo.svg" style="width: 100%;" />

foo.svg: <svg width="123" height="456"></svg>

Ich möchte jedoch dem SVG durch CSS zusätzliche Stile hinzufügen, sodass das Verknüpfen eines externen Stils keine Option ist. Wie erstelle ich eine Inline-SVG-Skala?

180
bjb568

Um die Koordinaten innerhalb des SVG-Bildes unabhängig von der skalierten Größe des Bildes festzulegen, verwenden Sie das viewBox-Attribut des SVG-Elements, um festzulegen, was der Begrenzungsrahmen des Bildes im Koordinatensystem des Bildes ist, und verwenden Sie die Attribute width und height um die Breite oder Höhe der betreffenden Seite zu definieren.

Zum Beispiel, wenn Sie Folgendes haben:

<svg>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Es wird als 10 x 20 x Dreieck dargestellt:

10x20 triangle

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

<svg width=100 height=50>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

10x20 triangle

Wenn Sie das Ansichtsfeld festlegen, wird das Bild so transformiert, dass das angegebene Feld (im Koordinatensystem des Bildes) so skaliert wird, dass es in die angegebene Breite und Höhe (im Koordinatensystem der Seite) passt. Um beispielsweise das Dreieck auf 100px um 50px zu vergrößern:

<svg width=100 height=50 viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

100x50 triangle

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

<svg width="100%" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

300x150 triangle

Beachten Sie, dass das Seitenverhältnis standardmäßig beibehalten wird. Wenn Sie also angeben, dass das Element eine Breite von 100%, aber eine Höhe von 50px haben soll, wird es tatsächlich nur bis zu einer Höhe von 50px skaliert (es sei denn, Sie haben ein sehr enges Fenster):

<svg width="100%" height="50px" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

100x50 triangle

Wenn Sie möchten, dass es horizontal gedehnt wird, deaktivieren Sie das Seitenverhältnis mit preserveAspectRatio=none:

<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

300x50 triangle

(Beachten Sie, dass ich zwar in meinen Beispielen eine für die HTML-Einbettung gültige Syntax verwende, um die Beispiele jedoch als Bild in StackOverflow einzubinden, werde ich stattdessen in eine andere SVG-Datei eingebettet. Daher muss eine gültige XML-Syntax verwendet werden.

365
Brian Campbell

Sie möchten eine Transformation als solche durchführen:

mit JavaScript:

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

Mit CSS:

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

Wickeln Sie Ihre SVG-Seite in ein Group-Tag als solches und richten Sie sie aus, um die gesamte Seite zu bearbeiten:

<svg>
  <g id="yourtarget">
    your svg page
  </g>
</svg>

Hinweis : Maßstab 1.0 ist 100%

17
Gary Hayes

Nach 48 Stunden Recherche endete ich damit, um eine proportionale Skalierung zu erhalten:

HINWEIS: Dieses Beispiel wurde mit React geschrieben. Wenn Sie das nicht verwenden, ändern Sie den Camel-Case-Stoff wieder in Bindestriche (dh ändern Sie backgroundColor in background-color und ändern Sie den Stil Object in 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>

Im obigen Beispielcode geschieht Folgendes:

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 im Wesentlichen sagt, welche Größe wo gezeichnet werden soll. Wenn Sie den SVG 1000x1000 px mit CSS erstellt haben, Ihre Viewbox jedoch 2000x2000 war, würden Sie das linke obere Viertel Ihrer SVG sehen.

Die ersten beiden Zahlen, min-x und min-y, legen fest, ob die SVG-Werte innerhalb der Viewbox verschoben werden sollen.

Mein SVG muss nach oben/unten oder links/rechts verschoben werden

Untersuchen Sie dies: viewbox = "50 50 450 450"

Die ersten beiden Zahlen verschieben Ihren SVG-Wert um 50px und 50px nach oben, und die zweiten beiden Zahlen sind die Viewbox-Größe: 450x450 px. Wenn Ihr SVG-Format 500 x 500 groß ist, jedoch einige zusätzliche Auffüllungen vorhanden sind, können Sie diese Zahlen manipulieren, um sie innerhalb der "Viewbox" zu verschieben.

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

Sie können die Viewbox auch ganz weglassen, aber Ihre Laufleistung hängt von jeder anderen Einstellung ab, die Sie zu dieser Zeit haben. Nach meiner Erfahrung werden Sie auf Probleme mit der Beibehaltung des Seitenverhältnisses stoßen, da das Ansichtsfeld das Seitenverhältnis definieren hilft.

ASPEKT-VERHÄLTNIS ERHALTEN

MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

Basierend auf meinen Nachforschungen gibt es viele verschiedene Einstellungen für das Seitenverhältnis, die Standardeinstellung ist jedoch xMidYMid meet. Ich lege es mir an, um mich explizit zu erinnern. xMidYMid meet lässt sich proportional zum Mittelpunkt X und Y skalieren. Dies bedeutet, dass es im Viewbox zentriert bleibt.

BREITE

MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width

Sehen Sie sich meinen Beispielcode oben an. Beachten Sie, wie ich nur die Breite und 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 Stack Overflow-Frage bei.

Sie können den Wert in einen beliebigen Pixelwert ändern, aber ich würde empfehlen, 100% so zu verwenden, wie ich es gemacht habe, um die maximale Größe zu erreichen und dann mit CSS über den übergeordneten Container zu steuern. Ich empfehle das, weil Sie eine "richtige" Kontrolle bekommen. Sie können Medienabfragen verwenden und die Größe ohne verrücktes JavaScript steuern.

SKALIEREN MIT CSS

Sehen Sie sich meinen obigen Beispielcode 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, aber es zeigt Ihnen, wie Sie dem Benutzer erlauben, die SVG-Größe zu ändern, während das richtige Seitenverhältnis beibehalten wird. Da die SVG ihr eigenes Seitenverhältnis beibehält, müssen Sie nur die Breite der Breite des übergeordneten Containers ändern. Die Größe wird dann wie gewünscht geändert.

Wir lassen die Höhe allein und/oder setzen sie auf auto, und wir steuern die Größenänderung mit der Breite. Ich habe die Breite gewählt, weil sie aufgrund von responsiven Designs oft aussagekräftiger ist.

Hier ist ein Bild dieser Einstellungen, die verwendet werden:

 enter image description here

Wenn Sie in dieser Frage jede Lösung gelesen haben und immer noch verwirrt sind oder nicht genau sehen, was Sie brauchen, lesen Sie diesen Link hier. Ich fand es sehr hilfreich:

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

Es ist ein umfangreicher Artikel, der jedoch praktisch alle Möglichkeiten zur Manipulation einer SVG-Datei mit oder ohne CSS unterbricht. Ich empfehle, es zu lesen, während Sie gelegentlich einen Kaffee trinken oder Ihre Wahl aus ausgewählten Flüssigkeiten.

15
agm1984

Spieler um und fanden, dass dieses CSS die SVG-Datei in Chrome 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.

11
Kerry7777

Die Anpassung des Attributs currentScale funktioniert in IE (ich habe es mit IE 11 getestet), jedoch nicht in Chrome.

0
Fabian Madurai