This is a simple fiddle that displays a circular region inside a rectangle https://jsfiddle.net/3v6yhf0m/
svg {
border: 3px dashed #999;
}
svg > rect:hover {
fill: green;
}<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="myClip">
<circle cx="30" cy="30" r="20"/>
</clipPath>
</defs>
<rect x="10" y="10" width="100" height="100" fill="blue"
clip-path="url(#myClip)"/>
</svg>But I want to view the region of rectangle that lies outside the circle using clip-path https://jsfiddle.net/yhbeevya/
svg {
border: 3px dashed #999;background-color:blue;fill:blue;
}
svg > rect:hover {
fill: green;
}<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="myClip">
<circle cx="30" cy="30" r="20"/>
</clipPath>
</defs>
<rect x="10" y="10" width="100" height="100" fill="white"
clip-path="url(#myClip)"/>
</svg>Please share your ideas