如何让指定SVG实现全屏显示？已排查通用方案仍存问题

我仔细看了你的SVG代码，其实问题不是出在path的d属性上，而是SVG及其容器的尺寸配置有冲突和缺失，调整以下几个地方就能实现全屏显示：

1. 清理SVG的冗余尺寸属性 #

你的SVG里同时写了两种宽高设置：width=100% height=100%和width="299px" height="289px"，这会导致浏览器优先解析固定像素值，无法自适应全屏。需要删掉固定像素的宽高属性，只保留百分比设置。

2. 给父容器设置全屏样式 #

包裹SVG的<div>需要占满整个视口，添加以下CSS：

body, div {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

这里连body一起设置是为了清除默认的边距，确保没有留白。

3. 配置SVG的自适应规则 #

给SVG添加preserveAspectRatio="none"属性，这样SVG会完全拉伸填满容器（如果想要保持原有比例不拉伸，可以用preserveAspectRatio="xMidYMid meet"，但全屏铺满通常需要前者）。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <style>
    body, div {
      margin: 0;
      padding: 0;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div>
    <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 299 289" preserveAspectRatio="none" enable-background="new 0 0 299 289" xml:space="preserve">
      <path fill="url(#skyGradient)" d="M293.468,275.282c0,1.617-1.311,2.928-2.928,2.928H8.46c-1.617,0-2.928-1.311-2.928-2.928V13.718 c0-1.617,1.311-2.928,2.928-2.928h282.08c1.617,0,2.928,1.311,2.928,2.928V275.282z"/>
      <g>
        <polygon fill="#7A5034" stroke="#7A5034" stroke-width="1.9519" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" 67.032,174.069 96.807,225.639 126.581,277.21 67.032,277.21 12.484,277.21 39.258,225.639 "/>
        <polygon fill="#7A5034" stroke="#7A5034" stroke-width="1.9519" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" 130.469,185.854 160.243,231.532 190.017,277.21 130.469,277.21 70.921,277.21 100.695,231.532 "/>
        <polygon fill="#7A5034" stroke="#7A5034" stroke-width="1.9519" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" 195.858,154.624 225.632,215.917 255.406,277.21 195.858,277.21 136.309,277.21 166.083,215.917 "/>
        <polygon fill="#7A5034" stroke="#7A5034" stroke-width="1.9519" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" 233.92,185.854 259.694,230.532 287.468,277.21 233.92,277.21 174.371,277.21 204.145,231.532 "/>
      </g>
      <defs>
        <linearGradient id="skyGradient" x1="100%" y1="100%">
          <stop offset="0%" stop-color="lightblue" stop-opacity=".5">
            <animate attributeName="stop-color" values="lightblue;blue;red;red;black;red;red;purple;lightblue" dur="14s" repeatCount="indefinite" />
          </stop>
          <stop offset="100%" stop-color="lightblue" stop-opacity=".5">
            <animate attributeName="stop-color" values="lightblue;orange;purple;purple;black;purple;purple;blue;lightblue" dur="14s" repeatCount="indefinite" />
            <animate attributeName="offset" values=".95;.80;.60;.40;.20;0;.20;.40;.60;.80;.95" dur="14s" repeatCount="indefinite" />
          </stop>
        </linearGradient>
      </defs>
    </svg>
  </div>
</body>
</html>

这样修改后，SVG就能完全铺满整个屏幕，同时保留原有的动画效果。

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