Wie passe ich Svg zu HTML Breite und Höhe?

Ich möchte eine Seite erstellen enthält nur ein svg Element, die Breite und Höhe passen und maximal mögliche Skalierung hat.Wie passe ich Svg zu HTML Breite und Höhe?

Quelle

2017-05-17 Pavel

Verwandte Fragen

How can I make an svg scale with its parent container?

How to resize an image to fit in the browser window?

hat nicht funktioniert, aber Kombination der vorgeschlagenen Methoden Problem gelöst.

1) ersetzen width="A" height="B" in Öffnung <svg ...> Tag zu viewBox="0 0 A B" max-width="100%" width="auto" max-height="100vh" height="auto".

Jetzt fast Werke es aber nicht sehr genau, da Browser fügt automatisch margin: 8-body ‚s-Art (auch wenn es in .html Datei nicht <body> Tag ist). So

2) hinzufügen <style> body { margin: 0 } </style>

Quelle

2017-05-17 16:37:28 Pavel

Dies könnte helfen. Ich habe dieses CSS verwendet, um ein Hintergrundbild an Breite und Höhe anzupassen, und es wird entsprechend dem Browser skaliert.

html { 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    position: relative; 
}

Sie können Ihre SVG in einem DIV gesetzt und eine Klasse, um es hinzuzufügen, dann einfach Sie die oben genannten CSS verwenden Sie die DIV Inhalt zu skalieren.

Quelle

2017-05-17 15:59:15

leider nicht in Chrome – Pavel

setzen Sie Ihr Bild in einem div und wenden diese CSS-Regeln:

div{ 
    height:100vw; 
    height:100vh; 
} 
svg{ 
    height:100%; 
    width:100% 
}

Quelle

2017-05-17 16:09:45

Leider funktioniert das nur die svg beschneidet – Pavel

Wie passe ich Svg zu HTML Breite und Höhe?

Antwort

Verwandte Themen