CODEWITHSUNDEEP
htmlcsssvg
Frank
Frank

Reputation: 23

Trying to make SVG height responsive

I am trying to make the height of my SVG responsive, after looking around online I found that I could try to add this to the SVG:

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

However that did not work for me when viewing the SVG on a mobile phone or until a certain distance at the bottom of the page is found, what can I do so that the image displays in the correct location regardless of the height?

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

Upvotes: 2

Views: 45

Answers (1)

ElusiveCoder
ElusiveCoder

Reputation: 1609

Give below css to your svg image and you're done...

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>

Upvotes: 1

Related Questions