0

我正在使用对象标签来嵌入 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。

4

2 回答 2

1

您可以制作一个透明的 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(...);

可以在此处找到任何详细信息： 获取 Rect 元素的屏幕像素坐标

于 2013-02-11T17:18:09.760 回答
-1

似乎使用 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 中测试过）单击事件未使用 svg 注册，请改用 mousedown。

于 2013-02-10T17:48:05.173 回答