我正在使用对象标签来嵌入 svg。我希望能够设置单击事件以及更改鼠标悬停和鼠标悬停时的填充颜色等内容。我知道我可以在 svg 中设置事件，但是当 svg 是导航系统等的一部分时，这是非常不切实际的。
<a id="{{id}}DatePickerBtn">
<object data="images/date-icon.svg" type="image/svg+xml" style="height: 100%;"></object>
<span class="block">Change Date</span>
</a>
在“a”标签上设置事件仅在单击跨度文本时触发，在 btn.getElementsByTagName('object')[0] 上设置事件也不起作用。
我在互联网上搜索了关于从 javascript 与 svg 交互的教程，但没有运气。 请不要使用 jQuery，我更喜欢 vanilla JS。
【问题讨论】：
标签： javascript html svg
您可以制作一个透明的 div 叠加层以捕获所有鼠标事件。
<div style="margin: 0px; padding: 0px; position: absolute; width: 100px; height: 100px; background-color: rgba(128, 128, 128, 0.0);" id="clickableDiv"></div>
要查找 SVG 元素的任何像素坐标，您可以使用这两个函数
...getScreenCTM();
matrixTransform(...);
任何细节都可以在这里找到： Getting the Screen Pixel coordinates of a Rect element
【讨论】：
似乎使用 getSVGDocument() 是这里的关键。我对鼠标事件的设置稍有不同，所以忽略那部分，但我相信其他人可以弄清楚如何将这些示例实现到他们自己的东西中。
sb.addEvent(datePickerBtn, 'mouseover', function() {
var path = this.getElementsByTagName('object')[0].getSVGDocument().getElementById('icon');
path.style.setProperty('fill', '#ffffff');
});
sb.addEvent(datePickerBtn.getElementsByTagName('object')[0].getSVGDocument(), 'mousedown', datePickerBtnClick);
上面的代码在鼠标悬停时将填充设置为白色，并在单击时触发一个函数。请记住，您必须命名您的 svg 元素，并且当您的 svg 仅包含一个命名元素时，这样做最容易，否则您必须对 svg 中的每个单独元素重复此过程。
另一个需要注意的注意事项是，由于某种原因（至少在 Firefox 中，可能还有其他原因，但我只在 FF 中测试过）click 事件未在 svg 中注册，请改用 mousedown。
【讨论】：