مسار التشريح <clippath> لـ SVG

<svg width="200" height="100" style="border: 1px solid #cccccc;">
　　　　<defs>
　　　　　　　　<clippath id="clipPath">
　　　　　　　　　　　　<rect x="15" y="15" width="40" height="40"></rect>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<circle cx="25" cy="25" r="20" style="fill: #0000ff; clip-path: url(#clipPath); "></circle>
</svg>
<svg width="200" height="100" style="border: 1px solid #cccccc;">
　　　　<defs>
　　　　　　　　<clippath id="clipPath2">
　　　　　　　　　　　　<rect x="15" y="15" width="40" height="40"></rect>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<circle cx="25" cy="25" r="20" style="fill: #0000ff; clip-path: url(#clipPath2); "></circle>
　　　　<rect x="15" y="15" width="40" height="40" style="stroke: #000000; fill:none;"></rect>
</svg>

<svg width="200" height="100" style="border: 1px solid #cccccc;">
　　　　<rect x="5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00;"></rect>
</svg>
<svg width="200" height="100" style="border: 1px solid #cccccc;">
　　　　<defs>
　　　　　　　　<clippath id="clipPath3">
　　　　　　　　　　　　<path d="M10,10 q60,60 100,0 q50,50 50,50 l40,0 l-40,40 l-100,-20"></path>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<rect x="5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00; clip-path: url(#clipPath3);"></rect>
</svg>

<svg width="200" height="100" style="border: 1px solid #cccccc;">
　　　　<rect x="5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00;"></rect>
　　　　<circle　cx="20"　cy="20"　r="20"　style="stroke:　none;　fill:　#ff0000;"></circle>
</svg>
<svg width="200" height="100" style="border: 1px solid #cccccc;">
　　　　<defs>
　　　　　　　　<clippath id="clipPath4">
　　　　　　　　　　　　<rect x="10" y="20" width="100" height="20"></rect>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<g style="clip-path: url(#clipPath4);">
　　　　　　　　<rect　x="5"　y="5"　width="190"　height="90"　style="stroke:　none;　fill:#00ff00;"></rect>
　　　　　　　　<circle　cx="20"　cy="20"　r="20"　style="stroke:　none;　fill:　#ff0000;"></circle>
　　　　</g>
</svg>

<svg width="200" height="100" style="border: 1px solid #cccccc;">
　　　　<rect x="5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00;"></rect>
　　　　<circle　cx="20"　cy="20"　r="20"　style="stroke:　none;　fill:　#ff0000;"></circle>
</svg>
<svg width="200" height="100" style="border: 1px solid #cccccc;">
　　　　<defs>
　　　　　　　　<clippath id="clipPath5">
　　　　　　　　　　　　<text x="10" y="20" style="font-size: 20px;">
　　　　　　　　　　　　　　　　هذا نص
　　　　　　　　　　　　</text>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<g　style="clip-path:　url(#clipPath5);">
　　　　　　　　<rect　x="5"　y="5"　width="190"　height="90"　style="stroke:　none;　fill:#00ff00;"></rect>
　　　　　　　　<circle　cx="20"　cy="20"　r="20"　style="stroke:　none;　fill:　#ff0000;"></circle>
　　　　</g>
</svg>