无需SMIL、JS、foreignObject及:checked的SVG交互式图表实现方案

核心逻辑 #

用SVG原生图形（比如<rect>）替代HTML <input>复选框，依靠CSS的:focus伪类实现持久的显示/隐藏切换——给模拟复选框的元素添加tabindex="0"使其可被聚焦，再通过:focus状态关联目标元素的显隐状态。

具体实现步骤 #

• 用<rect>绘制复选框边框，用<path>绘制选中状态的对勾（默认隐藏对勾）。
• 给复选框元素设置tabindex="0"，确保可通过点击或Tab键触发聚焦。
• 利用CSS相邻兄弟/后代选择器，将复选框的:focus状态与目标内容、选中标记的显示状态绑定：聚焦时显示对勾和目标内容，失焦时隐藏。
• 添加:hover和:focus的视觉样式，提升交互直观性。

示例代码 #

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <style>
    /* 复选框基础样式 */
    .checkbox {
      fill: #fff;
      stroke: #333;
      stroke-width: 2;
      cursor: pointer;
    }
    /* 选中标记默认隐藏 */
    .check-mark {
      fill: none;
      stroke: #2196F3;
      stroke-width: 3;
      stroke-linecap: round;
    }
    /* 目标内容默认隐藏 */
    .toggle-content {
      display: none;
      font-family: sans-serif;
      font-size: 14px;
      fill: #333;
    }
    /* 聚焦时显示选中标记和目标内容 */
    .checkbox:focus + .check-mark {
      fill: #2196F3;
    }
    .checkbox:focus ~ .toggle-content {
      display: block;
    }
    /* 聚焦状态的视觉反馈 */
    .checkbox:focus {
      outline: 2px solid #2196F3;
      outline-offset: 2px;
    }
  </style>
  <!-- 可聚焦的复选框主体 -->
  <rect class="checkbox" x="20" y="20" width="20" height="20" tabindex="0"/>
  <!-- 选中对勾 -->
  <path class="check-mark" d="M24 28 L28 24 L34 30"/>
  <!-- 切换显示的内容 -->
  <text class="toggle-content" x="50" y="35">切换显示的内容示例</text>
</svg>

关键说明 #

• 完全符合Wikisource规范：仅使用SVG原生元素和内联<style>，未涉及任何禁用技术（JS、SMIL、HTML foreignObject等）。
• 可访问性支持：支持键盘操作（Tab键切换焦点），聚焦状态有清晰的高亮提示。
• 状态持久化：聚焦状态会保持至用户点击其他可聚焦元素或切换焦点，逻辑与真实复选框一致。

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