SVG形状填充图片切换时transition过渡动画失效问题求助

问题根源 #

CSS的transition属性没法对fill的url()值生效——这类引用标识符属于离散值，浏览器没办法在两个不同的图案引用之间生成过渡动画，所以直接给fill加过渡完全没用。

可行方案：多路径叠加+opacity过渡 #

核心思路是创建多个完全相同的路径，每个路径绑定一个填充图案，默认只显示一个，点击切换时通过控制路径的opacity实现淡入淡出效果（opacity是可插值的数值属性，支持transition）。

修改后的完整代码 #

HTML

<svg id="logo" viewbox="0 0 322 419.6">
  <!-- 三个完全相同的路径，分别对应不同填充图案 -->
  <path class="st0" d="M289.9,234.5c31.4-37.8,41.3-91.4,22.8-140.8c-27.9-74.6-111-112.4-185.5-84.5c-48.8,18.3-79.9,60.7-90.9,108                    C36.1,117.6,5.7,268,0.7,318.4c-1.1,10.9-0.6,28.5,5,43.4c17.4,46.6,69.5,69.4,116.1,52c16.1-6,29.4-16.6,39.3-29.2                     c0,0,0.1-0.2,0.1-0.2S258.3,272.5,289.9,234.5z" />
  <path class="st0" d="M289.9,234.5c31.4-37.8,41.3-91.4,22.8-140.8c-27.9-74.6-111-112.4-185.5-84.5c-48.8,18.3-79.9,60.7-90.9,108                    C36.1,117.6,5.7,268,0.7,318.4c-1.1,10.9-0.6,28.5,5,43.4c17.4,46.6,69.5,69.4,116.1,52c16.1-6,29.4-16.6,39.3-29.2                     c0,0,0.1-0.2,0.1-0.2S258.3,272.5,289.9,234.5z" />
  <path class="st0" d="M289.9,234.5c31.4-37.8,41.3-91.4,22.8-140.8c-27.9-74.6-111-112.4-185.5-84.5c-48.8,18.3-79.9,60.7-90.9,108                    C36.1,117.6,5.7,268,0.7,318.4c-1.1,10.9-0.6,28.5,5,43.4c17.4,46.6,69.5,69.4,116.1,52c16.1-6,29.4-16.6,39.3-29.2                     c0,0,0.1-0.2,0.1-0.2S258.3,272.5,289.9,234.5z" />
  <defs>
      <pattern id="imageFill1" x="0" y="0" width="1" height="1" >
        <image xlink:href="images-testing/production.jpg" height="100%"/>
      </pattern>
      <pattern id="imageFill2" x="0" y="0" width="1" height="1">
        <image xlink:href="images-testing/branding.jpg" height="100%"/>
      </pattern>
      <pattern id="imageFill3" x="0" y="0" width="1" height="1">
          <image xlink:href="images-testing/media.jpg" height="100%"/>
      </pattern>
  </defs>
</svg> 

<h1 style="color:white"><a class="image-link">Production</a></h1>
<h1 style="color:white"><a class="image-link">Branding</a></h1>
<h1 style="color:white"><a class="image-link">Media</a></h1>

CSS

#logo {
  position: relative;
}

.st0 {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* 默认显示第一个图案 */
.st0:first-child {
  opacity: 1;
}

JavaScript

const paths = document.querySelectorAll('.st0');
const toggleLinks = document.querySelectorAll('.image-link');

// 初始化：给每个路径绑定对应的填充图案
paths[0].style.fill = 'url(#imageFill1)';
paths[1].style.fill = 'url(#imageFill2)';
paths[2].style.fill = 'url(#imageFill3)';

// 点击切换逻辑
toggleLinks.forEach((link, index) => {
  link.addEventListener('click', () => {
    // 隐藏所有路径
    paths.forEach(path => path.style.opacity = 0);
    // 显示当前索引对应的路径
    paths[index].style.opacity = 1;
  });
});

方案说明 #

这种方法避开了fill属性无法过渡的限制，利用opacity的平滑过渡实现图案切换的动画效果。多个路径完全重叠，切换时只改变透明度，视觉上就是图案的淡入淡出切换。

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