javascript -

Question

I have some object tags that each embeds a svg file. Clicking on the object tag (the svg), should call a javascript function. As I understand, the object tag doesn't support mouse events.

I have read of dousins solutions with object & flash, but they don't work with svg.

It is not a solution to code something in the svg file.

score 2 · Accepted Answer

如果您不需要 svg 文件中的脚本和交互性，您也许可以使用 <img> 标记。

就像 Robert Longson 所说，鼠标事件进入 <object> 标签，因此您需要将事件处理程序放在 svg 中（您可以使用脚本执行此操作，而无需修改原始 svg 文件）。这是一个如何从引用它的 html 访问 svg 的 DOM 的示例。

澄清：

获取根 svg 元素（参见示例）
调用rootsvg.addEventListener("click", window.parent.yourFunctionHere, false)（假设yourFunctionHere是在主 html 文档的脚本中定义的函数）

score 1 · Accepted Answer

您可以使用 img 标签，并且仍然使用文档模型编辑 SVG。所需要的只是一点想法。我一直在研究类似的问题，其中 svg 文本需要可编辑，因此我需要单击鼠标来激活编辑。

如果你希望你的 SVG 是可点击的，那么 object 标签不是要走的路。它将所有事件重新路由到其内容，并且无法在其顶部放置透明 div，因为该对象自动成为顶部项目，因此您嵌入的对象始终可以接收鼠标事件。（想想 Flash 视频播放器）。

您可以做的是使用 XMLSerializer 和 createObjectURL 将您的 svg 转换为 blob，然后可以使用以下命令将其显示为 img 标签，其中 mysvg 是一个 SVG，已使用 xhttp 加载并解析为 xml 文档：

     var mysvg = xhttp.responseXML;
     var xml2str = new XMLSerializer();
     var svg_blob = new Blob([xml2str.serializeToString(mysvg)],{'type': "image/svg+xml"});
     var url = URL.createObjectURL(svg_blob);
     document.getElementById("svg1").src = url;

svg1 是一个 img 标签，它很乐意接受您希望使用的任何事件处理程序。

score 0 · Accepted Answer

鼠标事件转到<object>标签的内容。

您将需要在标签<div>前面放置一些其他标签，例如绝对定位的透明<object>标签，并使用它来捕获鼠标事件。

或者，您可以将<object>标记的内容设置为 pointer-events="none" 以便它们不处理事件，此时您可以在<object>标记中处理它们。

3 回答 3

Related

Reference