css - SVG:是否可以切出一个区域？

Question

使用 SVG，是否可以从组中剪切出一个区域？

例如，给定下面的蓝色父容器，是否可以在不修改组内子元素的情况下说“从 x=25% 切出直到 x=75%”？

A 是初始状态，B 是最终状态:

Answer 1

正如@Robert Longson 评论的那样:

SVG does not have a concept of reflow like HTML does, so no.

也许尝试使用 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>