如何仅为打印预览调整svg图像的大小？

Question

Right now I have some d3 graphs that on the page that listen to the screen resize event and can be enlarged quite large. However when a user goes to print them they are too big for the printed page. If I limit the size of the svg's then if the screen is resized really wide then they wont scale.

In other words I need my svg's to be a certain size in the print preview yet still scale in the browser view port. How could one accomplish this?

Answer 1

You should be able to use media queries to scale the graphs. https://developer.mozilla.org/en-US/docs/Web/CSS/@media

For example:

@media print { 
    svg {
        width: 3in;
    }
}