视口宽度≤660px隐藏logo文本时如何修改SVG的viewBox属性

该需求可正常实现，以下是两种常用的实现思路：

方案1：纯CSS实现（推荐） #

不需要修改viewBox属性，直接通过CSS调整SVG的显示尺寸即可，性能更高、逻辑更简单：

• 给你的SVG元素添加自定义类名，示例为.LogoMonni-svg，可根据实际代码调整
• 在现有媒体查询中新增SVG尺寸控制规则：

@media (width <= 660px) {
  .LogoMonni-text {
    display: none;
  }
  /* 调整为你需要的小尺寸logo参数即可 */
  .LogoMonni-svg {
    width: 60px;
    height: auto;
  }
}

方案2：JavaScript动态修改viewBox #

如果确实需要调整viewBox的可视区域来适配隐藏文本后的内容，可以用JS监听窗口尺寸动态修改属性：

function adjustLogoViewBox() {
  const logoSvg = document.querySelector('.LogoMonni-svg');
  if (window.innerWidth <= 660) {
    // 替换为你需要的小尺寸viewBox值，格式为x y 宽度 高度
    logoSvg.setAttribute('viewBox', '0 0 60 60');
  } else {
    // 替换为默认状态的viewBox值
    logoSvg.setAttribute('viewBox', '0 0 200 60');
  }
}
// 页面加载完成后执行一次
window.addEventListener('load', adjustLogoViewBox);
// 窗口尺寸变化时触发调整
window.addEventListener('resize', adjustLogoViewBox);

提示：如果logo内只需要隐藏文本后缩小展示，方案1完全可以满足需求，无需额外引入JS逻辑。

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