我的个人网页上有 4 个 SVG 按钮作为主菜单的一部分。
/-------------------------------------------------------- -------------------------------------------------- ----------------------------------/
单击其中一个按钮后，所有 4 个按钮都会缩回到 Angular 落，并显示相应的部分(即“关于我”按钮 --> “关于我”部分)。
最初我将 SVG 对象嵌入到 img 标签中，如下所示:
<img class = "button active" id = "person-icon" src = "resources/main-page-icons/person-icon.svg"/>
我这样做是因为我读到，当不需要对 SVG 进行动画处理时，就没有必要将其嵌入到对象/嵌入标签中。然而，我今天决定为 SVG 元素创建悬停效果。我必须将 img 标签更改为对象以允许样式/动画
<object class = "button active" id = "person-icon" data = "resources/main-page-icons/person-icon.svg" type = "image/svg+xml"></object>
悬停效果按预期工作，但现在我无法单击它。检查该元素后发现，我单击的是 SVG 本身，而不是单击的是它嵌入的对象。将其包装在 div 中也没有解决问题。
问题: 有没有办法可以在处理 SVG 元素嵌入的对象元素上的单击事件时为 SVG 元素设置动画？
如果有人问“为什么不在 SVG 元素内处理点击事件？” 我认为 SVG 元素的行为影响其他元素是不可能或没有意义的，这就是为什么我处理 SVG 元素的点击事件 OUTSIDE (即点击 1 个按钮 --> 其他按钮展开，内容淡入 = 不好)。也许可以，但我认为这没有意义，最初也没有必要。
感谢您提前提供的帮助。
最佳答案
我找到了答案here一段时间后谷歌搜索:
This kind of tag needs some content to show up on the page.
Your tag:
<object data="images/logo.svg" type="image/svg+xml" class="icon-logo"></object>is not having any inner HTML-Content, so you won't be able to click it.
这与需要某种innerHTML 才能被 DOM 识别的对象有关。如果我添加一些文本，如 <object>Zoot!</object>然后我就可以点击它。此外，SVG DOM 与 HTML DOM 有根本的不同，并且缺少innerHTML。更多信息here .
解决方法是使用图像标签并将其包围在我可以设置动画/样式的 div 中。这在大多数情况下都有效，但在我的例子中，div 是一个圆形(边框半径:50%)，当在屏幕上平移时，形状会倾斜。当应用背景/边框并且倾斜可见时，看起来很傻。不过那是另一篇文章的事了!
关于html - 在 <img> 和 <object> 之间更改时，SVG 上的单击行为会发生变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36784030/