如何将响应式svg背景绝对居中？

Question

我试图达到以下结果：

正文具有黑色背景和浏览器窗口的固定高度。图形是一个简单的SVG，每边有50px的边距。在浏览器调整大小时，此比率应保持一致。

Answer 1

将固定宽度的黑色边框实现为围绕svg矩形的笔划，该矩形本身占据了整个宽度和宽度。窗户的高度。像这样的东西应该为你做的伎俩（snippit赢得了正确的反应，所以不要尝试运行它 - 将代码复制到一个单独的文件或页面）：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;