是否可以使用CSS修改SVG的viewBox属性值？

该需求无法直接通过纯CSS实现：viewBox是SVG元素的原生属性，不属于CSS可控制的样式属性范畴，CSS没有提供直接修改元素原生属性的能力。

可行实现方案 #

方案1：CSS模拟同等视觉效果（推荐，无JS成本） #

不需要修改viewBox属性本身，通过调整CSS规则就能达到和修改属性完全一致的显示效果，参考代码：

/* 替换为你的SVG选择器 */
svg {
  width: 230px;
  height: 87px;
}

@media (max-width: 660px) {
  svg {
    width: 100px;
    /* 保证内容左对齐，超出右侧范围的内容裁剪 */
    preserveAspectRatio: xMinYMin slice;
  }
}

该方案最终渲染效果和将viewBox="0 0 230 87"修改为viewBox="0 0 100 87"完全一致。

方案2：JavaScript直接修改viewBox属性 #

如果业务场景确实需要修改属性本身，可以通过JS监听媒体查询变化实现：

const mediaQuery = window.matchMedia('(max-width: 660px)')
// 替换为实际的SVG元素选择器
const targetSvg = document.querySelector('svg')

function toggleViewBox(e) {
  targetSvg.setAttribute('viewBox', e.matches ? '0 0 100 87' : '0 0 230 87')
}

// 初始化执行+绑定监听
toggleViewBox(mediaQuery)
mediaQuery.addEventListener('change', toggleViewBox)

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