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

我会考虑两层，每一层都使用clip-path，我会控制opacity：

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>

Answer 2

我看不到使用 HTML 元素上的剪辑路径来实现您想要的方法。您只能在 CSS 中将一个剪辑路径替换为另一个剪辑路径。您不能在其中两个之间进行插值。

但是，如果您可以将图像移动到 SVG 中，那么这很容易做到。然后你可以对内边框做任何你想做的事情。

但是请注意，使用此解决方案，内边框不是剪辑路径，因此不会使图像透明。我不知道这对你是否重要。如果您确实需要，应该可以这样做。

body {
	background: #ccc;
}

.clip-svg .emblem2-ref {
  transform-origin: 150px 200px;
  transform: scale(1.2, 1.2);
	transition: 0.4s all ease;
}
.clip-svg:hover .emblem2-ref {
  transform: scale(1, 1);
}

#Emblem2 {
  fill: #ccc;
}

<!-- Clip path and inner border definitions. Can be included once and used by multiple SVGs -->
<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>
    
    <path id="Emblem2"
          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
             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"/>
  </defs>
</svg>

<!-- Will need one of these SVGs for every image you want to display -->
<svg width="300" height="400" class="clip-svg">
  <g clip-path="url(#Emblem)">
    <image width="300" height="400" preserveAspectRatio="xMidYMid slice"
           xlink:href="https://images.pexels.com/photos/864994/pexels-photo-864994.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"/>
    <use class="emblem2-ref" xlink:href="#Emblem2"/>
  </g>
</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>