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），它不會改變大小/比例的圖像，它只會揭示更多。