SVG clip-path图片悬停内边框动画失效问题求助

嘿，我懂你遇到的问题了——用两个不同的clip-path:url()做hover过渡时，动画完全没效果对吧？这是因为浏览器没法在两个独立的SVG裁剪路径引用之间生成平滑过渡，它们属于离散的属性值，没有可插值的中间状态，所以transition根本起不了作用。

不过别担心，有两种简单的方法能实现你要的「边框从两侧向内收缩」的效果，我给你整理好了：

方案一：用伪元素+Transform模拟收缩边框（推荐） #

这个方法利用CSS transform的可动画特性，用伪元素单独模拟边框，实现平滑的收缩效果：

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); /* 保持原始的实心徽章形状 */
}
.clip-svg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit; /* 继承主容器的背景图 */
  clip-path: url(#EmblemBorder); /* 只裁剪出边框区域 */
  transform: scale(1.2); /* 初始放大到容器外，隐藏边框 */
  transition: transform 0.4s ease; /* 给缩放加过渡 */
}
.clip-svg:hover::after {
  transform: scale(1); /* hover时缩放到原尺寸，边框向内收缩显示 */
}

<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="EmblemBorder">
      <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>

原理简单说：

1. 主容器用原始的Emblem裁剪路径，保持图片的实心徽章样式。
2. 伪元素用EmblemBorder只显示边框，初始时放大到容器外，用户看不到。
3. hover时伪元素缩回到原尺寸，边框就从外侧向内收缩显示，transition对transform的支持非常好，动画丝滑。

方案二：用SVG内部动画直接过渡路径 #

如果你想直接在SVG裁剪路径上做动画，可以用SVG的<animate>元素，直接过渡path的d属性：

<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="AnimatedEmblem">
      <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">
        <!-- 鼠标hover时过渡到带边框的路径 -->
        <animate
          attributeName="d"
          begin="clip-svg.mouseover"
          dur="0.4s"
          to="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 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"
          fill="freeze" />
        <!-- 鼠标离开时恢复原始路径 -->
        <animate
          attributeName="d"
          begin="clip-svg.mouseout"
          dur="0.4s"
          to="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"
          fill="freeze" />
      </path>
    </clipPath>
  </defs>
</svg>

对应的CSS只需要引用这个动画裁剪路径：

body { background: #ccc; }
.clip-svg {
  position: relative;
  display: block;
  height: 400px;
  width: 300px;
  background-position: center center;
  background-size: auto 100%;
  clip-path: url(#AnimatedEmblem);
}

这个方案直接在SVG内部处理路径动画，不需要额外的伪元素，不过要注意浏览器对SVG path动画的支持（主流浏览器都没问题）。

内容的提问来源于stack exchange，提问作者Firehold