如何在SharePoint Online现代UI实现可点击SVG切换页面内容？

方案一：脚本编辑器Web部件（快速实现） #

1. 准备带点击事件的SVG：给每个需要点击的图形区域添加id和onclick属性，同时设置cursor:pointer让鼠标显示为手型，示例代码：

<svg width="500" height="300">
  <rect id="region1" x="50" y="50" width="100" height="100" fill="#f44336" onclick="switchContent('content1')" style="cursor:pointer"/>
  <rect id="region2" x="200" y="50" width="100" height="100" fill="#4caf50" onclick="switchContent('content2')" style="cursor:pointer"/>
  <!-- 按需添加更多图形区域 -->
</svg>

2. 准备内容切换的HTML和脚本：

<!-- 内容容器，默认只显示第一个 -->
<div id="content1" class="svg-content">区域1对应的详细内容</div>
<div id="content2" class="svg-content" style="display:none">区域2对应的详细内容</div>

<script>
function switchContent(targetId) {
  // 隐藏所有内容块
  document.querySelectorAll('.svg-content').forEach(item => {
    item.style.display = 'none';
  });
  // 显示选中的内容
  document.getElementById(targetId).style.display = 'block';
}
</script>

3. 在SharePoint页面添加脚本编辑器Web部件：如果找不到该部件，先到站点设置的「网站集功能」里启用「SharePoint Server 发布基础版」，或联系管理员开启自定义脚本权限，之后把上述SVG、HTML和脚本一起粘贴进去，保存页面即可测试。

方案二：SPFx客户端Web部件（合规兼容） #

如果租户禁用了自定义脚本，这是适配现代UI的最优解：

• 用SPFx创建简单Web部件，将SVG作为资源引入，给每个图形区域绑定点击事件
• 在Web部件内部用React/TypeScript管理内容显示状态，点击时切换对应内容的可见性
• 打包部署到SharePoint站点后，即可像普通Web部件一样添加到页面，完全兼容现代UI无兼容问题。

临时替代：HTML内容Web部件 #

若租户允许在HTML内容Web部件中嵌入脚本，可直接把SVG和切换代码粘贴进去快速实现效果。但如果租户限制了脚本权限，此方法会失效，优先推荐前两个方案。

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