SVG: можно ли вырезать регион?

Question

Используя SVG, возможно ли вырезать регион из группы?

Например, учитывая голубой родительский контейнер ниже, можно ли сказать "вырезать из x = 25% до x =75% ", без изменения дочерних элементов внутри группы?

A - это начальное состояние, B - это то, чем оно будет:

Answer 1

Как прокомментировал @Robert Longson:

У SVG нет концепции перекомпоновки, как у HTML, поэтому нет.

Возможно, попытайтесь создать иллюзию свертывания, используя анимационные команды SMIL, которые будут перемещать прямоугольники 2, 3, 4 и скрывать второй и третий прямоугольник под первым

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	     width="50%" height="50%" viewBox="0 0 416 250" >  
 <defs> 
     <!-- Define a rectangle pattern -->
    <rect id="child" x="0" y="0" width="96" height="184"  stroke="crimson" stroke-width="6" />
	  
 </defs>  
		<rect x="2" y="2" width="410" height="196" fill="none" stroke="dodgerblue" stroke-width="6" />
		      <!-- Clone rectangle copies -->
			  <use id="r2" x="108" y="8" xlink:href="#child" fill="gold" > 

			     <!-- Rectangle Collapse Animation -->
				 <animate id="s_r2" attributeName="x" values="108;2" begin="start.click+0.1s" dur="3s" fill="freeze" /> 
				    <!-- Rectangle Expansion Animation -->
					<animate id="e_r2" attributeName="x" values="2;108" begin="back.click"  dur="2s" fill="freeze" />
				     
				</use>
               
			    <use id="r3" x="210" y="8" xlink:href="#child" fill="purple" >
				  <animate id="s_r3" attributeName="x" values="210;2" begin="start.click+0.1s" dur="3s" fill="freeze" /> 
				     <animate id="e_r3" attributeName="x" values="2;210" begin="back.click"  dur="2s" fill="freeze" />
				</use>
				
				
				  <use id="r4" x="312" y="8" xlink:href="#child" fill="white"  >
				      <animate id="s_r4" attributeName="x" values="312;108" begin="start.click+0.1s"  dur="2s" fill="freeze" /> 
					      <animate id="e_r4" attributeName="x" values="108;312" begin="back.click"  dur="2s" fill="freeze" />
				</use>
				  
				<use id="r1" x="6" y="8" xlink:href="#child" fill="white" />  
		<!-- The button that starts the animation collapses the rectangles -->		
    <g id="start" transform="translate(-100 200)">
	    <rect x="120" y="10" width="80" height="30" rx="15" fill="transparent" stroke="#B59964" />
	  <text x="138" y="33" font-size="24" fill="#C75C5C" >Start </text>
	</g> 	 
	    <!-- Button that starts the animation of the rectangles turning -->
        <g id="back" transform="translate(0 200)">
	    <rect x="120" y="10" width="80" height="30" rx="15" fill="transparent" stroke="#B59964" />
	  <text x="138" y="33" font-size="24" fill="#C75C5C" >Back </text>
	</g> 	
</svg>