Below is a code snippet for half round shape SVG example:
<svg version="1.1" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg" >
<clipPath id="cut-off-bottom">
<rect x="0" y="0" width="200" height="100" fill="red"/>
</clipPath>
<circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" fill="red"/>
<clipPath id="cut-off-bottom2">
<rect x="0" y="0" width="200" height="100" fill="red"/>
</clipPath>
<circle cx="100" cy="100" r="80" clip-path="url(#cut-off-bottom2)" fill="blue"/>
</svg>
<svg version="1.1" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg" >
<clipPath id="cut-off-bottom">
<rect x="0" y="0" width="200" height="100" fill="red"/>
</clipPath>
<circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" fill="red"/>
<clipPath id="cut-off-bottom2">
<rect x="0" y="0" width="200" height="100" fill="red"/>
</clipPath>
<circle cx="100" cy="100" r="80" clip-path="url(#cut-off-bottom2)" fill="blue"/>
</svg>
No comments:
Post a Comment