SVG动画高度不改变背景图像的比例

Question

我正尝试使用SVG形状创建手风琴，我使用SVG因为我的章节没有规律的形状。

我创建使用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> 

这种形状当你点击它应该在高度扩张的部分。我的问题是，如果不破坏背景图像的比例，我无法更改SVG的高度。如果在这种情况下可以选择使用SVG，我会对它开放，非常感谢。

Answer 1

我设法通过创建一个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>

我创造了每年为包含图像容器

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

一个div

然后我指定的SVG的图像容器的夹路径属性在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; 
 
}

我部分重叠的年，所以，而不是试图扩大今年容器我刚才的所有年后下滑在一个使用边距点击：

$('.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

您是否想过使用图像作为fill而不是image的svg元素？

这种类型模式的一些垃圾代码会是这个样子：

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

这样你可以改变路径的大小（在这种情况下，rect），它不会改变大小/比例的图像，它只会揭示更多。