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

Question

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

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

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

Ich möchte jedoch weitere Stile auf die SVG durch CSS hinzufügen, so verbindet einen externen keine Option ist. Wie mache ich eine Inline-SVG-Skala?

Answer 1

Um die Koordinaten innerhalb des SVG-Bildes unabhängig von der skalierten Größe des Bildes anzugeben, verwenden Sie das Attribut viewBox auf dem SVG-Element, um festzulegen, wie der Begrenzungsrahmen des Bilds im Koordinatensystem des Bildes ist width und height Attribute zum Definieren der Breite oder Höhe in Bezug auf die enthaltende Seite.

Zum Beispiel, wenn Sie die folgenden Schritte aus:

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

Es wird als 10px von 20px Dreieck machen wird:

Nun, wenn Sie nur die Breite und Höhe festgelegt, das wird die Größe des SVG-Elements ändern, aber das Dreieck nicht skalieren:

Wenn Sie das Ansichtsfeld festlegen, wird das Bild so transformiert, dass das angegebene Feld (im Koordinatensystem des Bildes) auf die angegebene Breite und Höhe (im Koordinatensystem) skaliert wird der Seite). Zum Beispiel das Dreieck zu skalieren bis sein 100px von 50px:

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

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

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

Beachten Sie, dass das Seitenverhältnis standardmäßig beibehalten wird.Also, wenn Sie angeben, dass das Element eine Breite von 100% aufweisen, aber eine Höhe von 50px, wird es eigentlich nur auf die Höhe von 50px vergrößern (es sei denn Sie ein sehr schmales Fenster haben):

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

Wenn Sie es wirklich wollen horizontal strecken, Seitenverhältnis Erhaltung mit preserveAspectRatio=none deaktivieren:

<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> 

(Beachten Sie, dass ich in meinen Beispielen die Syntax für die HTML-Einbettung verwende, um die Beispiele als Bild in StackOverflow einzubinden. Ich bin stattdessen in eine andere SVG eingebettet, daher muss ich eine gültige XML-Syntax verwenden)

Answer 2

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 einer Gruppe-Tag eine Transformation zu tun, als solche ll wollen als solche und Ziel es die ganze Seite zu manipulieren:

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

Hinweis: Maßstab 1,0 100% ist

Answer 3

Herumspielen & gefunden scheint diese CSS die SVG in Chrome-Browser enthalten bis zu dem Punkt, wo der Behälter ist größer als das Bild:

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

scheint auch in FF + IE 11.