Change size of SVG clipping mask on mouseover

buckdanny

I want to show images using a mask. I tried the css clip-path but because the browser support is that poor I want to use an svg for clipping. My question is how can i change the size of the mask on mousover?

Like here:

I am using this code at the moment:

 <svg>
	 <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="model_detail.jpg"></image>
	  </g>
</svg

enxaneta

In your case, since you need to resize both the circle and the clipped image, you may scale the svg element on hover like so:

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>

Please observe that I've added a viewBox and a width attribute to the svg. If you don't declare the viewBox and the width the svg element will have a size of 300px/150px and the part of the circle that falls outside the svg canvas will be cuted off.

UPDATE

The OP is commenting

I don't want to scale the image, just the mask. Is that possible?

This is how I would do it: In the next example I'm using transitions to scale the circle when you mouse over the svg element:

#c{transform: scale(1);
  transition: transform 0.5s;}

svg:hover #c {
  transform: scale(1.5);
}

Next comes a working example:

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>
	  <!--group containing the image with clipping applied-->
	   
     <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>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2020-12-8

Comments

0 comments

TOP Ranking

Article