如何解决Swup无法触发SVG中xlink:href链接页面转场的问题？

• 第一步：正确配置Swup的链接选择器
  按照官方文档添加SVG xlink链接的选择规则，注意JS字符串中冒号需要双转义，不同Swup版本的配置键不同：
  • Swup 3.x及以上版本配置示例：

  import Swup from 'swup';
  
  const swup = new Swup({
    linkSelector: 'a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[xlink\\:href]'
  });
  

  • Swup 2.x及以下版本配置示例：

  const swup = new Swup({
    LINK_SELECTOR: 'a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[xlink\\:href]'
  });
  

• 第二步：补充xlink属性读取逻辑（配置后仍失效时使用）
  部分场景下Swup默认无法正确读取SVG a标签的xlink命名空间属性，可通过添加钩子手动处理跳转逻辑：

  swup.hooks.on('link:click', (visit, context) => {
    const { el, event } = context;
    // 读取xlink:href属性，兼容命名空间写法
    const xlinkHref = el.getAttribute('xlink:href') || el.getAttributeNS('http://www.w3.org/1999/xlink', 'href');
    // 仅处理站内相对路径、未标记禁用swup的链接
    if (xlinkHref?.startsWith('/') && !el.hasAttribute('data-no-swup')) {
      event.preventDefault();
      swup.navigate(xlinkHref);
    }
  });
  

• 注意事项
  1. 确保SVG内部的a标签没有绑定阻止事件冒泡的自定义逻辑，避免点击事件无法被Swup捕获
  2. xlink:href的路径规则需要和普通a标签的href保持一致，均使用站内相对路径

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