どのように応答性のあるSvgバックグラウンドを絶対的な中心に置くのですか？

Question

は、私は次のような結果を達成しようとしている：

体は黒色の背景と、ブラウザウィンドウの固定の高さを持っています。グラフィックは、両面に50pxのマージンを持つシンプルなSVGです。ブラウザのサイズが変更されると、この比率は一定のまま維持されます。

Answer 1

固定幅の黒い枠線を、ウィンドウの高さの全幅&を取るsvg矩形の周囲の線として実装します。

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

： - このような何かはあなたのためのトリックを（別のファイルにするか、ページへのアウトコードをコピーsnippitがそうな場所でそれを実行してみませんそれを正しくrederません）行う必要があります