If you need to resize both the circle and the clipped image in your scenario, one way to achieve this is by scaling the svg element on hover. Here's an example of how you can do it:
svg {
display: block;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
transform: scale(1);
transition: transform 0.5s;
}
svg:hover {
transform: scale(1.5);
}
<svg viewBox="0 0 200 200" width="200">
<defs>
<!--defines the shape to use for clipping-->
<circle id="circle" cx="100" cy="100" r="100" />
</defs>
<clipPath id="clip">
<!--creates the clipping mask from the shape-->
<use xlink:href="#circle" overflow="visible"></use>
</clipPath>
<!--group containing the image with clipping applied-->
<g clip-path="url(#clip)">
<image overflow="visible" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg"></image>
</g>
</svg>
It's important to note that I've included a viewBox and a width attribute in the svg for proper sizing. Without these attributes, the svg element defaults to 300px/150px size, leading to cutoff parts of the circle falling outside the canvas.
UPDATE
The OP has raised a question about scaling only the mask without affecting the image. In response, here's an approach using transitions to scale the circle independently when hovering over the svg element:
#c {transform: scale(1); transition: transform 0.5s;}
svg:hover #c {transform: scale(1.5);}
Here's a functional example of how this can be implemented:
svg {
border: 1px solid;
display: block;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#c {transform: scale(1);transition: transform 0.5s;}
svg:hover #c {transform: scale(1.5);}
<svg viewBox="-150 -150 300 300" width="200">
<defs>
<clipPath id="clip">
<!--creates the clipping mask from the shape-->
<circle id="c" r="100" />
</clipPath>
</defs>
<image clip-path="url(#clip)" id="img" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" x="-150" y="-150" width="300" height="300"></image>
</svg>