如何将感应式SVG背景绝对居中？

Question

I'm trying to achieve the following result:

The body has a black background and a fixed height of the browser window. The graphic is a simple SVG with 50px margins on each side. This ratio should stay consistent as the browser resizes.

Answer 1

Implement the fixed-width black border as the stroke around the svg rectangle, which itself takes up the full width & height of the window. Something like this should do the trick for you (the snippit won't reder it properly so don't try running it in place--copy the code out to a separate file or to your page):

 <svg xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="bgGradient"> <stop offset="0%" stop-color="#fe7b47" /> <stop offset="100%" stop-color="#8cbef7" /> </linearGradient> </defs> <rect x="0" y="0" width="100vw" height="100vh" fill="url(#bgGradient)" stroke="#000000" stroke-width="100px" /> </svg>