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

【问题标题】：How do I absolute center a responsive svg background?如何将响应式 svg 背景绝对居中？
【发布时间】：2016-11-19 18:36:43
【问题描述】：

我正在尝试实现以下结果：

body 有黑色背景和固定的浏览器窗口高度。该图形是一个简单的 SVG，每边有 50 像素的边距。随着浏览器调整大小，该比率应保持一致。

【问题讨论】：

什么“比率”应该保持一致？您的意思是在浏览器调整大小时应该保持 50 像素的边距（周围显示 50 像素的黑色背景）？
没错！我希望 svg 具有流畅的宽度，边缘总是出现一点黑色。

标签： css svg responsive

【解决方案1】：

将固定宽度的黑色边框实现为 svg 矩形周围的描边，它本身占据了窗口的整个宽度和高度。像这样的东西应该可以为您解决问题（snippit 不会正确地重新编辑它，所以不要尝试在适当的位置运行它 - 将代码复制到单独的文件或您的页面）：

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

【讨论】：