Animate height of SVG without changing proportions of background image - html

Question

I'm trying to create an accordion using SVG shapes, I am using SVGs because my sections do not have regular shapes.
I created this shape using SVG clipPath
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1276.4 270" style="enable-background:new 0 0 1276.4 270;">
<style type="text/css">
.st0{display:none;clip-path:url(#XMLID_111_);}
.st1{display:inline;}
</style>
<g id="XMLID_5_">
<defs>
<path id="XMLID_1_" d="M414.5,2.2c-27.6,1.7-55.2,2.9-82.7,0.9c-10.7,0.4-21.4,0.9-32.1,1.5c-33.9,1.8-67.8,5-101.7,5.8
C163.7,11.2,129.3,10.1,95,9c-31.7-1-63.3-2.1-95-1.6v126.3l0.2,121.8c160.1-23.4,321.4-2.1,482.2,4.8c86.7,3.7,173.1,0,259.5-7.6
c42.7-3.7,85.1-9.3,128-7.3c44.5,2.1,88.7,8.5,132.8,14.5c25,3.3,50,6.4,75.2,8.3c27.5,2,55,2,82.6,1.5c39-0.7,78-2.6,116.9-6.1
V137.8l-0.2-126.1c-7.6,0.2-15.3,0.1-23-0.3c-20.8-1-41.6-3-62.5-3.6c-43.4-1.3-86.8-0.8-130.2-2c-43.7-1.1-87.3-3.1-131-2.3
c-43.1,0.8-86.1,3.2-129.2,4.7c-43.6,1.5-87.1,1.8-130.7-0.1c-43.7-1.9-87.2-5-130.9-6.9C521.9,0.4,504.1,0,486.4,0
C462.5,0,438.5,0.7,414.5,2.2"/>
</defs>
<use xlink:href="#XMLID_1_" style="overflow:visible;fill:#525252;"/>
<clipPath id="shape_1">
<use xlink:href="#XMLID_1_" style="overflow:visible;"/>
</clipPath>
</g>
<image clip-path="url(#shape_1)" width="2000" height="1700" xlink:href="dummy_url.jpg" preserveAspectRatio="xMidYMin slice"></image>
</svg>
When you click on a section it should expand in height. My problem is that I can't change the height of the SVG without ruining the background image's proportions. If there is an alternative to using SVGs in this situation I would be open to it, thank you very much.

Answer 1

Have you thought of using the image(s) as fill for your svg elements instead of image?
Some junk code for this type of pattern would look something like this:
<rect x="-50" width="100%" height="100%" style="max-width=950px" fill="url(#your-id)" rx="6" ry="6" id="background-panel"/>
<defs>
<pattern id="your-id" patternUnits="userSpaceOnUse" x="120" y="170" width="650" height="547">
<image xlink:href="dummy_url.jpg" width="650" height="547" opacity="1"/>
</pattern>
</defs>
that way you can change the size of the path (in this case, the rect) and it won't change the size/proportions of the image, it will just reveal more of it.

Answer 2

I managed to do it by creating one svg:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 2315.2 989" style="enable-background:new 0 0 2315.2 989;" xml:space="preserve">
<style type="text/css">
.st0{clip-path:url(#XMLID_45_);fill-rule:evenodd;clip-rule:evenodd;fill:#913B58;}
</style>
<g id="XMLID_30_">
<g id="XMLID_31_">
<defs>
<rect id="XMLID_2_" x="1.5" width="2313.9" height="987.8"/>
</defs>
<clipPath id="shape_1">
<use xlink:href="#XMLID_1_" style="overflow:visible;"/>
</clipPath>
<path id="XMLID_1_" class="st0" d="M875.1,970.2c157.1,6.7,313.5-0.1,470-13.8c77.3-6.8,154.1-16.8,231.8-13.2
c80.6,3.7,160.6,15.5,240.5,26.3c45.2,6,90.6,11.7,136.1,15c49.8,3.7,99.7,3.7,149.6,2.8c70.8-1.3,141.6-4.7,212.1-11.1l-0.4-955
c-13.8,0.3-27.7,0.1-41.7-0.5c-37.7-1.8-75.4-5.5-113.1-6.6c-78.6-2.3-157.3-1.5-235.9-3.6c-79.1-2.1-158.2-5.6-237.3-4.2
c-78,1.4-155.9,5.7-233.9,8.5c-78.9,2.8-157.7,3.2-236.6-0.2c-79.1-3.4-158-9.1-237-12.5c-75.9-3.3-151-2.8-226.8,1.9
c-50,3.1-100.1,5.2-149.8,1.6c-19.4,0.8-38.7,1.7-58.1,2.7c-61.4,3.3-122.8,9-184.2,10.5c-119.7,2.9-239.3-7.3-359-5.4l0.4,948.1
C291.8,919.2,583.9,957.8,875.1,970.2"/>
</g>
</g>
</svg>
I created a div for each year containing an image container
<div class="year">
<div class="image-container" style="background-image: url(<?php the_sub_field('image') ?>);"></div>
</div>
Then I specified the svg to the clip-path property of the image container in CSS
.image-container{
clip-path: url(#shape_1);
background-size: cover;
background-repeat: no-repeat;
padding-top: 40%;
background-position-y: 27%;
position: relative;
}
I partially overlapped the years so instead of trying to expand the year containers I just slide down all the years after the one clicked by using margin-top:
$('.year').each(function(){
var pYearIndex = $(this).index();
if(pYearIndex>1){
$(this).addClass('not-first');
}
var begin = 0;
var translated = (pYearIndex*(-3))+begin;
});
$('.year').on('click',function() {
var nYears = $('.year').length;
var thisYear = $(this).index();
if($(this).hasClass('to_show')){
$(this).removeClass('to_show');
$('.expanded').removeClass('expanded');
$('footer').css('margin-top', '-22%');
}
else{
$('.expanded').removeClass('expanded');
$('.to_show').removeClass('to_show');
$(this).addClass('to_show');
if(thisYear<nYears){
$('.year').eq(thisYear).addClass('expanded');
$('footer').css('margin-top', '-22%');
}
else{
$('footer').css('margin-top','-2%');
}
}
});