嵌入式SVG上的Javascript事件

我正在使用object标记嵌入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（“对象”）[0]也不起作用

---

我在互联网上搜索了一些关于如何从javascript与svg交互的教程，但运气不好请不要jQuery，我更喜欢香草JS。

似乎使用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);

上面的代码在mouseover上将填充设置为白色，并在单击时激发函数。请记住，您必须命名svg元素，当svg只包含一个命名元素时，命名svg元素是最简单的，否则您必须对svg中的每个单独元素重复此过程

---

另一个需要注意的是，由于某些原因（至少在firefox中，可能还有其他的，但我只在FF中测试过），点击事件没有在svg中注册，请改用mousedown

您可以创建一个透明的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中设置事件，您说这不是一个可接受的答案。不要认为为了满足报复需要进行否决表决，但可以。本例并不是在实际的SVG标记中设置事件，而是在引用SVG中元素的外部javascript文件中设置事件。这与我的问题是如何做的相同。我提到我不想在实际的svg中设置脚本标记。@ryandif sb代表什么？sb代表沙盒。这只是我的框架设置方式，可能不应该包含在示例代码中。

    ...getScreenCTM();
    matrixTransform(...);