如何合并叠加两个SVG元素实现全屏居中logo加渐变覆盖效果

你可以按照以下逻辑合并两个SVG，完全满足居中、铺满的需求：

• 根SVG设置为100%宽高，配合清除页面默认边距，实现无白边填满浏览器窗口
• 合并两个SVG的defs配置，把模糊滤镜、渐变定义放在同一个节点下避免重复
• 把logo放在独立的嵌套SVG内，通过preserveAspectRatio属性实现自动居中，保持logo比例不拉伸
• 注意SVG元素渲染顺序：先写的元素在底层，后写的元素在上层，因此渐变矩形要写在logo节点之后，自然覆盖在logo上层

完整可直接使用的代码 #

<!-- 清除页面根元素默认边距，确保SVG能铺满窗口 -->
<style>
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
<svg
  xmlns="http://www.w3.org/2000/svg"
  width="100%"
  height="100%"
>
  <!-- 合并所有共用定义 -->
  <defs>  
    <filter id="blur">
      <feGaussianBlur stdDeviation="7" />
    </filter>
    <linearGradient id="g" x1="0%" x2="100%" y1="0%" y2="100%">
      <stop style="stop-color: #754C24;" offset="0" stop-opacity="0.8"/>
      <stop style="stop-color: #C7B299;" offset="1" stop-opacity="0.9"/>
    </linearGradient>
  </defs>

  <!-- 居中logo：嵌套SVG使用原logo的viewBox，通过preserveAspectRatio实现始终居中 -->
  <svg
    width="100%"
    height="100%"
    viewBox="100 -600 2000 2500"
    preserveAspectRatio="xMidYMid meet"
  >
    <g id="logo" fill="#e5cd98" filter="url(#blur)">
      <polygon points="514.86 528.38 850.86 280.38 898.86 432.38 1238.86 372.38 1720.86 528.38 1734.86 788.38 1390.86 752.38 1232.86 906.38 1048.86 936.38 934.86 606.38 588.86 676.38 514.86 528.38"/>
    </g>
  </svg>

  <!-- 上层渐变遮罩：后写的元素层级更高，宽高100%自动铺满整个窗口 -->
  <rect style="fill: url(#g);" width="100%" height="100%"/>
</svg>

关键配置说明 #

• preserveAspectRatio="xMidYMid meet"：这个属性会强制嵌套SVG内的logo保持原始宽高比，永远对齐父容器的水平中点、垂直中点，窗口缩放时不会出现拉伸、偏移
• 渐变矩形不设置任何偏移、固定尺寸，宽高直接绑定100%，会自动跟随根SVG的尺寸变化铺满整个可视区域
• 页面样式设置overflow: hidden是为了避免窗口尺寸变化时出现滚动条，保证纯全屏展示效果

内容的提问来源于stack exchange，提问作者Laurent