能否在自包含SVG文件中实现单选组式按钮明暗切换交互效果

完全可以在自包含SVG里实现这个效果，不需要依赖任何外部文件，甚至连JavaScript都可以不用写，下面给两个可直接复制用的方案，你按需选就行。

方案1：无JS纯原生实现（优先选，兼容性最好） #

不用搞复杂的逻辑，靠SVG原生支持的CSS :target 伪类加内部锚点就能实现，和HTML单选组的互斥逻辑一模一样：

• 每个按钮套一个带唯一ID的容器
• 用CSS写好暗化、高亮两种状态，默认第一个按钮高亮
• 点击按钮时触发内部锚点跳转，:target会自动匹配当前选中的按钮，切换样式
• 因为锚点都在SVG内部，不会触发外层页面滚动，完全不影响使用

完整可运行的代码如下，按钮形状颜色你直接改对应属性就行：

<svg width="400" height="100" viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
  <style>
    .btn { fill: #ccc; cursor: pointer; transition: fill 0.2s; }
    /* 锚点命中时当前按钮高亮，其他按钮自动变暗 */
    .btn-group > g:target .btn { fill: #2563eb; }
    .btn-group > g:target ~ g .btn { fill: #ccc; }
    /* 初始状态默认高亮第一个按钮 */
    .btn-group > g:first-child .btn { fill: #2563eb; }
  </style>

  <g class="btn-group">
    <g id="opt1">
      <a xlink:href="#opt1"><circle class="btn" cx="50" cy="50" r="30" /></a>
    </g>
    <g id="opt2">
      <a xlink:href="#opt2"><circle class="btn" cx="150" cy="50" r="30" /></a>
    </g>
    <g id="opt3">
      <a xlink:href="#opt3"><circle class="btn" cx="250" cy="50" r="30" /></a>
    </g>
    <g id="opt4">
      <a xlink:href="#opt4"><circle class="btn" cx="350" cy="50" r="30" /></a>
    </g>
  </g>
</svg>

这个方案所有现代浏览器、绝大多数支持交互的SVG查看器都能正常跑，没有脚本加载失败的问题，文件也极小。

方案2：极简JS实现（逻辑更好懂） #

要是你觉得CSS选择器的绕弯不好理解，加几行非常简单的JS也能实现，逻辑直白到看一眼就懂：

<svg width="400" height="100" viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
  <style>
    .btn { fill: #ccc; cursor: pointer; transition: fill 0.2s; }
    .btn.active { fill: #2563eb; }
  </style>

  <circle class="btn active" cx="50" cy="50" r="30" />
  <circle class="btn" cx="150" cy="50" r="30" />
  <circle class="btn" cx="250" cy="50" r="30" />
  <circle class="btn" cx="350" cy="50" r="30" />

  <script type="text/javascript"><![CDATA[
    const buttons = document.querySelectorAll('.btn')
    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        buttons.forEach(b => b.classList.remove('active'))
        btn.classList.add('active')
      })
    })
  ]]></script>
</svg>

提个醒：SVG里写JS必须包在<![CDATA[ ... ]]>标签里，不然XML解析会报错。

两个方案都完全满足你的需求：初始第一个按钮高亮，点击其他按钮自动互斥切换明暗状态，没有多余的表单提交或者外部请求，整个SVG是完全自包含的，单独存成.svg文件就能直接用。

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