Wie kann ich die SVG-Breite mit CSS skalieren?

Question

Ich verwende Google's Charts js Bibliothek. Es funktioniert gut und macht tolle Grafiken für unsere Daten.

Leider, aufgrund der Art und Weise, wie es erstellt wird, reagiert es nicht. Wenn sich also die Bildschirmgröße ändert, ändert sich die Übereinstimmung nicht. Ich habe das über eine redraw Funktion gelöst, die auf window.onresize gesetzt ist, damit ist das behoben.

Es scheint, dass das Drucken nicht als ein Größenänderungs-Ereignis betrachtet wird und daher wird Redraw nicht aufgerufen. Ich habe eine Nur-Druck-CSS, die den Rest der Seite formt, um gut auszusehen, wenn gedruckt, aber das Diagramm bleibt die gleiche Größe wie es im Browserfenster war. Ich kann das Fenster kleiner machen, und es druckt, ohne die Seitenskalierung zu vermasseln, aber das ist keine echte Lösung.

Ich habe versucht:

svg{width:100%;} Zugabe print.css - keine guten

Ich habe nicht versucht:

macht die Graphen eine festgelegte Größe, die gut gedruckt werden - dies scheint wie ein Hack, und ich würde es lieber nicht tun, wenn es überhaupt möglich ist.

EDIT

Eine Änderung: der Google Chart API SVG als <svg> in einem <div> schafft. Es ist kein Hintergrundbild. Diese

Answer 1

ist eine Überweisung:

https://developer.mozilla.org/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds

und meine Lösung:

Nach einigem trial-and-error, das ist, was ich gefunden habe.

Hinzufügen (zum ursprünglichen CSS):

html { 
    height: 100% 
} 

genau geliefert, was ich in der ursprünglichen Spezifikation suchen.

Außerdem, wenn ich das Bild wollte Zentrum sein, wenn es abgeschnitten wurde, konnte ich verwenden:

html { 
    background: url(path/to/image.jpg) no-repeat center center fixed; 
    background-size: cover; 
} 

Schließlich, wenn ich es wollte zentriert werden, hält immer das Seitenverhältnis, aber nicht abgeschnitten werden (dh einige Leerzeichen OK ist), dann könnte ich tun:

body { 
    background: url(/path/to/image.svg) no-repeat center center fixed; 
    background-size: contain; 
}