html - 鼠标悬停时更改 SVG 剪贴蒙版的大小

Question

我想使用 mask 显示图像。我尝试了 css 剪辑路径，但因为浏览器支持很差，所以我想使用 svg 进行剪辑。我的问题是如何更改 mousover 上蒙版的大小？

喜欢这里:

我现在正在使用这段代码:

 <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

Answer 1

在您的情况下，由于您需要调整圆圈和裁剪图像的大小，您可以像这样在悬停时缩放 svg 元素:

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>

请注意，我已经向 svg 添加了一个 viewBox 和一个 width 属性。如果您不声明 viewBox 和 width，则 svg 元素的大小将为 300px/150px，而落在 svg Canvas 之外的圆圈部分将为切断。

更新

OP正在评论

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

我会这样做:在下一个示例中，当您将鼠标悬停在 svg 元素上时，我将使用过渡来缩放圆圈:

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

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

接下来是一个工作示例:

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>