I want to create a simple UI where the users hovers over a SVG circle and the circle gets bigger (increases radius). Inside each circle I want to have an image/icon. The best way I've experimented with so far is to layer it; the image is appended first, then circle on top with fill:'none'. For the non-svg div case, it's a bit simpler, because we can style the div to crop the picture like this:
<div class="cropper">
<img class="picture" src="https:a picturejpg">
</div>
CSS
.cropper {
width: 100px;
height: 100px;
position: relative;
border: 2px solid white;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
overflow:hidden;
}
.picture {
display: block;
margin: 0 auto;
height: auto;
width: 100%;
}
Question: How can I adapt a similar circular crop implementation as seen above to the SVG case? Here is a rough visual reference illustrating my problem:
- important note: for the moment I'm just trying to do one svg circular crop as a proof of concept, but soon I will need to append them programmatically via d3.js or jquery. Answers that are programmatically robust are preferred.
