html - CSS svg 悬停动画/过渡

Question

我使用 svg 剪辑路径作为图像的蒙版。现在我想要在悬停时在它里面有一个内部边框。所以我为悬停制作了第二个剪辑路径，但过渡不会影响它。

我希望边框来自侧面(减少缩放/负缩放)。在这里你可以看到我想要的，而不需要工作动画/过渡:

body {
	background: #ccc;
}

.clip-svg {
  position: relative;
	display: block;
	height: 400px;
	width: 300px;
	background-position: center center;
	background-size: auto 100%;
	clip-path: url(#Emblem);
	transition: 0.4s all ease;
}
.clip-svg:hover {
	clip-path: url(#Emblem2);
}

<div class="clip-svg" style="background-image: url(https://images.pexels.com/photos/864994/pexels-photo-864994.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260)"></div>

<svg width="0" height="0">
  <defs>
    <clipPath id="Emblem">
      <path d="M279,240c0,96-139.4,145-139.4,145S22,336,22,240c0-58,0-203,0-203s65-11,129-11c75,0,128,11,128,11S279,136,279,240z"/>
    </clipPath>
	<clipPath id="Emblem2">
     <path d="M39,51.6V240c0,72.4,80.9,116.6,101.2,126.5c11-4.5,35.7-15.4,59.8-32.3c18.5-13,33.2-26.8,43.6-41.3
		c12.2-17,18.4-34.8,18.4-53V51.3C240.8,48,200.9,43,151,43C106.3,43,59.9,48.7,39,51.6z"/>
	<path d="M151,26C87,26,22,37,22,37s0,145,0,203c0,96,117.6,145,117.6,145S279,336,279,240c0-104,0-203,0-203S226,26,151,26z
		 M270,240c0,19.9-6.7,39.3-19.9,57.7c-10.9,15.1-26.2,29.7-45.5,43.1c-26.2,18.3-52.8,29.8-63.1,33.8l-1.6,0.6l-1.6-0.8
		c-10.4-5-37.2-18.9-61.3-41.3c-30.5-28.4-46-59.7-46-93.2V44.7l3.4-0.5C53.5,41.4,103.1,35,151,35c53.2,0,95.3,5.6,115.6,8.9
		l3.4,0.5V240z"/>
    </clipPath>
  </defs>
</svg>
<br/>
Image: <a href="https://www.pexels.com/photo/woman-wearing-white-top-holding-smartphone-and-tablet-864994/">https://www.pexels.com/...d-tablet-864994/</a>

提前致谢

Answer 1

我会考虑两层，每一层都使用一个剪辑路径，我会控制不透明度:

body {
  background: #ccc;
}

.clip-svg {
  position: relative;
  display: inline-block;
  height: 400px;
  width: 300px;
}
.clip-svg::before,
.clip-svg::after {
   content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-position: center center;
  background-size: auto 100%;
  background-image: var(--i);
  transition: 0.8s all ease;
}

.clip-svg::before {
  clip-path: url(#Emblem2);
}

.clip-svg::after {
  clip-path: url(#Emblem);
}
.clip-svg:hover::after {
  opacity:0;
}

<div class="clip-svg" style="--i: url(https://images.pexels.com/photos/864994/pexels-photo-864994.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260)"></div>

<svg width="0" height="0">
  <defs>
    <clipPath id="Emblem">
      <path d="M279,240c0,96-139.4,145-139.4,145S22,336,22,240c0-58,0-203,0-203s65-11,129-11c75,0,128,11,128,11S279,136,279,240z"/>
    </clipPath>
	<clipPath id="Emblem2">
     <path d="M39,51.6V240c0,72.4,80.9,116.6,101.2,126.5c11-4.5,35.7-15.4,59.8-32.3c18.5-13,33.2-26.8,43.6-41.3
		c12.2-17,18.4-34.8,18.4-53V51.3C240.8,48,200.9,43,151,43C106.3,43,59.9,48.7,39,51.6z"/>
	<path d="M151,26C87,26,22,37,22,37s0,145,0,203c0,96,117.6,145,117.6,145S279,336,279,240c0-104,0-203,0-203S226,26,151,26z
		 M270,240c0,19.9-6.7,39.3-19.9,57.7c-10.9,15.1-26.2,29.7-45.5,43.1c-26.2,18.3-52.8,29.8-63.1,33.8l-1.6,0.6l-1.6-0.8
		c-10.4-5-37.2-18.9-61.3-41.3c-30.5-28.4-46-59.7-46-93.2V44.7l3.4-0.5C53.5,41.4,103.1,35,151,35c53.2,0,95.3,5.6,115.6,8.9
		l3.4,0.5V240z"/>
    </clipPath>
  </defs>
</svg>