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>