Animierte Höhe von SVG ohne Änderung der Proportionen des Hintergrundbildes

Question

Ich versuche ein Akkordeon mit SVG-Formen zu erstellen, ich benutze SVGs, weil meine Sektionen keine regulären Formen haben.

Ich habe diese Form unter Verwendung von 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> 

Wenn Sie auf einen Abschnitt klicken, um es in der Höhe erweitern sollte. Mein Problem ist, dass ich die Höhe des SVG nicht ändern kann, ohne die Proportionen des Hintergrundbildes zu ruinieren. Wenn es in dieser Situation eine Alternative zur Verwendung von SVGs gibt, wäre ich dafür offen, vielen Dank.

Answer 1

schaffte ich es zu tun durch eine svg erstellen:

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

ich ein Bild Behälter

<div class="year"> 
 
      <div class="image-container" style="background-image: url(<?php the_sub_field('image') ?>);"></div> 
 
</div>

enthält ein div für jedes Jahr erstellt

Dann spezifiziert ich die svg auf den Clip-Pfad-Eigenschaft des Bild Container in CSS

.image-container{ 
 
\t clip-path: url(#shape_1); 
 
\t background-size: cover; 
 
\t background-repeat: no-repeat; 
 
\t padding-top: 40%; 
 
    \t background-position-y: 27%; 
 
    position: relative; 
 
}

ich teilweise die Jahre überlappt, so anstatt zu versuchen, die Jahr-Container zu erweitern ich alle nach unten rutschen nur die Jahre nach die eine unter Verwendung von margin-top geklickt haben:

$('.year').each(function(){ 
 
\t var pYearIndex = $(this).index(); 
 
\t if(pYearIndex>1){ 
 
\t \t $(this).addClass('not-first'); 
 
\t } 
 
\t var begin = 0; 
 
\t var translated = (pYearIndex*(-3))+begin; 
 
}); 
 
$('.year').on('click',function() { 
 
\t var nYears = $('.year').length; 
 
\t var thisYear = $(this).index(); 
 
\t if($(this).hasClass('to_show')){ 
 
\t \t $(this).removeClass('to_show'); 
 
\t \t $('.expanded').removeClass('expanded'); 
 
\t \t $('footer').css('margin-top', '-22%'); 
 
\t } 
 
\t else{ 
 
\t \t $('.expanded').removeClass('expanded'); 
 
\t \t $('.to_show').removeClass('to_show'); 
 
     $(this).addClass('to_show'); 
 
\t \t if(thisYear<nYears){ 
 
\t \t \t $('.year').eq(thisYear).addClass('expanded'); 
 
\t \t \t $('footer').css('margin-top', '-22%'); 
 
\t \t } 
 
\t \t else{ 
 
\t \t \t $('footer').css('margin-top','-2%'); 
 
\t \t } 
 
\t } 
 
});

Answer 2

Haben Sie gedacht, das Bild (s) als fill für Ihre Svg-Elemente anstelle von image zu verwenden?

Einige Junk-Code für diese Art von Muster wie folgt aussehen würde:

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

auf diese Weise die Größe des Wegs ändern kann (in diesem Fall die rect), und es wird das nicht ändern Größe/Proportionen des Bildes, es wird nur mehr davon offenbaren.