Html SVG中用于显示div的按钮

我真的需要一些帮助，我开始使用svg文件，这让我发疯了

Y创建了一个带有一些动画的复杂SVG文件，并将其作为一个文件插入HTML文件中。。。我需要的是从SVG中单击一个按钮，并在HTML中创建几个div以相应地显示

我不知道如何将此操作分配给每个按钮，因为SVG是HTML外部的

有人能帮我吗？我在这里上传了一个简化的示例：

PS：内联粘贴SVG代码不是一个选项，因为正如我提到的，它非常复杂，我希望尽可能保持HTML的干净。

使用

会使事情复杂化。在HTML中内联SVG会简单得多

//将单击事件添加到按钮“1”
document.getElementById（“punt01”）.addEventListener（“单击”，函数（）{
展示内容（“主题1”）；
});
document.getElementById（“punto2”）.addEventListener（“单击”，函数（）{
展示内容（“主题2”）；
});
document.getElementById（“punto3”）.addEventListener（“单击”，函数（）{
展示内容（“主题3”）；
});
document.getElementById（“punto4”）.addEventListener（“单击”，函数（）{
展示内容（“主题4”）；
});
函数showContent（contentId）{
//隐藏所有“主题”div，只显示我们想要的一个。
document.getElementById（“theme1”）.style.display='none'；
document.getElementById（“theme2”）.style.display='none'；
document.getElementById（“theme3”）.style.display='none'；
document.getElementById（“theme4”）.style.display='none'；
document.getElementById（contentId）.style.display='block'；
}

.content{
宽度：47%；
高度：60px；
背景色：aliceblue；
边框：实心#fff；
填充：10px；
文本对齐：居中；
浮动：左；
}

.st0{fill:#00A79D；}
.st1{fill:#FFB700；}
.st2{fill:#FFFFFF；}
内容1
内容1B
内容2
内容2B
内容3
内容3B
内容4
内容4B

首先，只需HTML、CSS和动画就可以轻松地重新创建SVG。但是为了回答您的问题，您是否考虑过将JavaScript单击事件侦听器绑定到每个编号的圆圈？您好@fubar，谢谢您的快速回答。。。正如我提到的，我展示的SVG只是我需要实现的一个基本示例，我真正的SVG使用了更多的代码。。。关于你的建议，我知道一定要用JS做些什么，但我不知道该怎么做：（如果你所发布的内容不是你所面临问题的代表性示例，我不知道有谁能给你具体的帮助。至于使用JavaScript，这是一个事件侦听器。

document.getElementById（'punto1'）。addEventListener（'click'，函数（事件）{console.log（'do something'）；}）

SVG中的代码量并不重要。您仍然只需要使用特定的类或id将可单击元素作为目标，您可以将事件侦听器绑定到这些元素。感谢@fubar，示例是aa-谢谢Paul！这非常好用！您可以在上看到它，因为您可能会注意到，我可以以某种方式简化这些函数，因为它们是完全相同，而不是每个ID都使用一个。我是JS的新手：（但多亏了你的帮助，它才起作用！干杯！