html - 尝试使 SVG 高度响应

Question

我试图让我的 SVG 高度响应，在网上四处看看后我发现我可以尝试将它添加到 SVG 中:

width="100%" height="100%" preserveAspectRatio="xMinYMin meet"

但是，当我在手机上查看 SVG 时，或者在找到页面底部的特定距离之前，这对我不起作用，我该怎么做才能使图像显示在正确的位置，而不管高度如何？

#home {
  height: 100vh;
  overflow: hidden;
}
#background {
  fill: white;
  stroke: none;
  transform-origin: 1270px 550px;
  -webkit-animation: fillbackground 2s linear 2s forwards;
  animation: fillbackground 2s linear 2s forwards;
}
@keyframes fillbackground {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(4);
  }
}
@-webkit-keyframes fillbackground {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(4);
  }
}
#middleground {
  -webkit-animation: addclip 0s linear 2s forwards;
  animation: addclip 0s linear 2s forwards;
}
@keyframes addclip {
  to {
    clip-path: url(#art);
  }
}
@-webkit-keyframes addclip {
  to {
    clip-path: url(#art);
  }
}
#foreground {
  fill: none;
  stroke: #fff;
  stroke-width: 10px;
  stroke-dasharray: 1028px;
  -webkit-animation: dash 2s;
  animation: dash 2s;
}
@keyframes dash {
  from {
    stroke-dashoffset: 1028px;
  }
  to {
    stroke-dashoffset: 0px;
  }
}
@-webkit-keyframes dash {
  from {
    stroke-dashoffset: 1028px;
  }
  to {
    stroke-dashoffset: 0px;
  }
}

<div id="home" class="section">
    <div class="cover">
        <svg viewBox="0 0 1366 768" width="100%" height="100%" preserveAspectRatio="xMinYMin meet">
            <defs>
                <path id="shape" d="M1039.5,770.5a125.77,125.77,0,0,0-17-32c-12.32-16.72-25.68-25.84-33-31-6-4.23-59.88-42.55-100-90-13.64-16.14-20.57-24.48-26-38-15-37.48-3.73-73.65,0-85,8.68-26.45,23-43.26,35-57,19-21.82,33.56-29.9,67-54,33.68-24.27,55.39-39.91,77-60,40.56-37.69,35.94-49.35,81-96,34.18-35.39,51.27-53.08,79-65,7.79-3.35,76-31.44,140,2a142,142,0,0,1,31,22l7.5,7.5V770.5Z" />
                <clipPath id="art">
                    <use xlink:href="#shape" />
                </clipPath>
            </defs>
            <image xlink:href="http://1.bp.blogspot.com/-xV_Q0sj_3HQ/T4NjscM0ibI/AAAAAAAAB_U/DKjSJvD0vls/s1600/Simple+unique+odd+weird+wallpapers+minimalistic+%2310.jpg" width="1366" height="768" preserveAspectRatio="xMidYMid slice" />
            <use xlink:href="#shape" id="background" />
            <image xlink:href="http://1.bp.blogspot.com/-xV_Q0sj_3HQ/T4NjscM0ibI/AAAAAAAAB_U/DKjSJvD0vls/s1600/Simple+unique+odd+weird+wallpapers+minimalistic+%2310.jpg" width="1366" height="768" preserveAspectRatio="xMidYMid slice" id="middleground" />
            <use xlink:href="#shape" id="foreground" />
        </svg>
    </div>
</div>

Answer 1

将下面的 css 添加到您的 svg 图像，您就完成了...

svg {
    position: absolute;
    left: 0;
    bottom: 0;
    height: auto;
}

svg {
    position: absolute;
    left: 0;
    bottom: 0;
    height: auto;
}
#home {
  height: 100vh;
  overflow: hidden;
}
#background {
  fill: white;
  stroke: none;
  transform-origin: 1270px 550px;
  -webkit-animation: fillbackground 2s linear 2s forwards;
  animation: fillbackground 2s linear 2s forwards;
}
@keyframes fillbackground {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(4);
  }
}
@-webkit-keyframes fillbackground {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(4);
  }
}
#middleground {
  -webkit-animation: addclip 0s linear 2s forwards;
  animation: addclip 0s linear 2s forwards;
}
@keyframes addclip {
  to {
    clip-path: url(#art);
  }
}
@-webkit-keyframes addclip {
  to {
    clip-path: url(#art);
  }
}
#foreground {
  fill: none;
  stroke: #fff;
  stroke-width: 10px;
  stroke-dasharray: 1028px;
  -webkit-animation: dash 2s;
  animation: dash 2s;
}
@keyframes dash {
  from {
    stroke-dashoffset: 1028px;
  }
  to {
    stroke-dashoffset: 0px;
  }
}
@-webkit-keyframes dash {
  from {
    stroke-dashoffset: 1028px;
  }
  to {
    stroke-dashoffset: 0px;
  }
}

<div id="home" class="section">
    <div class="cover">
        <svg viewBox="0 0 1366 768" width="100%" height="100%" preserveAspectRatio="xMinYMin meet">
            <defs>
                <path id="shape" d="M1039.5,770.5a125.77,125.77,0,0,0-17-32c-12.32-16.72-25.68-25.84-33-31-6-4.23-59.88-42.55-100-90-13.64-16.14-20.57-24.48-26-38-15-37.48-3.73-73.65,0-85,8.68-26.45,23-43.26,35-57,19-21.82,33.56-29.9,67-54,33.68-24.27,55.39-39.91,77-60,40.56-37.69,35.94-49.35,81-96,34.18-35.39,51.27-53.08,79-65,7.79-3.35,76-31.44,140,2a142,142,0,0,1,31,22l7.5,7.5V770.5Z" />
                <clipPath id="art">
                    <use xlink:href="#shape" />
                </clipPath>
            </defs>
            <image xlink:href="http://1.bp.blogspot.com/-xV_Q0sj_3HQ/T4NjscM0ibI/AAAAAAAAB_U/DKjSJvD0vls/s1600/Simple+unique+odd+weird+wallpapers+minimalistic+%2310.jpg" width="1366" height="768" preserveAspectRatio="xMidYMid slice" />
            <use xlink:href="#shape" id="background" />
            <image xlink:href="http://1.bp.blogspot.com/-xV_Q0sj_3HQ/T4NjscM0ibI/AAAAAAAAB_U/DKjSJvD0vls/s1600/Simple+unique+odd+weird+wallpapers+minimalistic+%2310.jpg" width="1366" height="768" preserveAspectRatio="xMidYMid slice" id="middleground" />
            <use xlink:href="#shape" id="foreground" />
        </svg>
    </div>
</div>