如何自适应插入多版本SVG Logo并保留其交互性？

核心思路是将三个适配不同设备的内联SVG全部包裹在链接标签<a>内，通过CSS媒体查询控制不同视口尺寸下仅显示对应SVG，其余隐藏。内联SVG支持直接编写元素级的hover样式，完美保留各自的交互效果。

代码示例 #

HTML 结构

<a href="/" class="logo-link">
  <svg class="logo logo-mobile" viewBox="0 0 100 50" aria-label="移动端Logo">
    <!-- 移动端SVG内部元素 -->
    <path d="..." />
  </svg>
  <svg class="logo logo-tablet" viewBox="0 0 150 75" aria-label="平板端Logo">
    <!-- 平板端SVG内部元素 -->
    <path d="..." />
  </svg>
  <svg class="logo logo-desktop" viewBox="0 0 200 100" aria-label="桌面端Logo">
    <!-- 桌面端SVG内部元素 -->
    <path d="..." />
  </svg>
</a>

CSS 样式

/* 默认隐藏所有Logo，仅通过媒体查询显示对应版本 */
.logo {
  display: none;
  width: 100%;
  height: auto;
}

/* 移动端适配 */
@media (max-width: 480px) {
  .logo-mobile {
    display: block;
  }
  /* 移动端Logo专属hover效果 */
  .logo-mobile path:hover {
    fill: #2563eb;
    transition: fill 0.3s ease;
  }
}

/* 平板端适配 */
@media (min-width: 481px) and (max-width: 768px) {
  .logo-tablet {
    display: block;
  }
  /* 平板端Logo专属hover效果 */
  .logo-tablet circle:hover {
    stroke-width: 3;
    stroke: #f97316;
    transition: stroke-width 0.3s ease;
  }
}

/* 桌面端适配 */
@media (min-width: 769px) {
  .logo-desktop {
    display: block;
  }
  /* 桌面端Logo专属hover效果 */
  .logo-desktop polygon:hover {
    opacity: 0.8;
    transform: scale(1.05);
    transition: all 0.3s ease;
  }
}

如果需要更灵活的控制（比如动态加载SVG资源、复杂的尺寸判定逻辑），可以用原生JS实现视口尺寸检测与SVG切换：

核心逻辑 #

1. 预先定义三个SVG的内容（或通过AJAX加载外部SVG文件）
2. 监听窗口resize事件，结合防抖函数避免频繁触发
3. 根据当前视口宽度，替换链接标签内的SVG内容，或切换对应SVG的显示状态

代码示例 #

<a href="/" class="logo-link" id="logoLink">
  <!-- 初始加载默认Logo -->
  <svg class="logo" viewBox="0 0 200 100" aria-label="桌面端Logo">
    <!-- 桌面端SVG内部元素 -->
    <path d="..." />
  </svg>
</a>

<script>
// 定义三个设备对应的SVG字符串（可替换为AJAX加载逻辑）
const svgVariants = {
  mobile: `<svg viewBox="0 0 100 50" aria-label="移动端Logo"><path d="..." /></svg>`,
  tablet: `<svg viewBox="0 0 150 75" aria-label="平板端Logo"><path d="..." /></svg>`,
  desktop: `<svg viewBox="0 0 200 100" aria-label="桌面端Logo"><path d="..." /></svg>`
};

// 防抖函数，避免resize频繁触发
function debounce(func, delay = 200) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 根据视口宽度切换SVG
function updateLogo() {
  const width = window.innerWidth;
  const logoLink = document.getElementById('logoLink');
  let currentSvg;

  if (width <= 480) {
    currentSvg = svgVariants.mobile;
  } else if (width <= 768) {
    currentSvg = svgVariants.tablet;
  } else {
    currentSvg = svgVariants.desktop;
  }

  // 仅当SVG内容变化时才更新，避免不必要的DOM操作
  if (logoLink.innerHTML !== currentSvg) {
    logoLink.innerHTML = currentSvg;
    // 可选：为新SVG绑定hover事件（如果是外部加载的SVG，需确保元素存在后绑定）
    const svgElement = logoLink.querySelector('svg');
    // 示例：为移动端SVG绑定hover
    if (width <=480) {
      svgElement.querySelector('path').addEventListener('mouseenter', () => {
        svgElement.querySelector('path').style.fill = '#2563eb';
      });
      svgElement.querySelector('path').addEventListener('mouseleave', () => {
        svgElement.querySelector('path').style.fill = '';
      });
    }
  }
}

// 初始化与监听
updateLogo();
window.addEventListener('resize', debounce(updateLogo));
</script>

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