交互式SVG-如何选择元素以对鼠标悬停动作做出反应? [英] Interactive SVG - how to choose element to react on mouseover action?

问题描述

我正在尝试制作一个交互式SVG，它将对不同的用户操作(鼠标悬停，单击等)做出反应.我使用的是Java Batik，但只要您描述我如何用XML处理问题就足够了.

I am trying to make an interactive SVG that would react on different user actions (mouse over, click etc.). I am using java Batik, but it will be enough, if you just describe me how to approach my problem in XML.

单击功能对我来说很好.问题在于悬停(将鼠标悬停在动作上).我的代码如下:

Clicking function works for me just fine. The problem is with hovering (mouse over action). My code looks like this:

svgRoot.setAttributeNS(null, "onmouseover", "evt.target.setAttribute('opacity', '0.5');");
svgRoot.setAttributeNS(null, "onmouseout", "evt.target.setAttribute('opacity', '1');");

svgRoot是整个.svg文件的根节点.所有其他元素都附加到该元素.将鼠标悬停在我的svq上时，只有当前元素变为透明(例如，文本元素或我当前将鼠标光标放在某个矩形上).但是，我希望整个svg是透明的(所有元素).我认为可以通过将此操作附加到根元素来完成此操作，但是不可以.

svgRoot is the root node of my whole .svg file. All other elements are appended to it. When hovering over my svq, only the current element gets transparent (for example a text element or some rectangle I have currently mouse cursor on). However, I would like the whole svg be transparent (all elements). I thought that this would be done by appending this action to the root element, but its not.

我还有一个名为"script.js"的外部ECMAscript文件，该文件链接到我创建的每个svg，因此我也可以在此脚本中对此文件进行编程，但是我不确定如何.

I also have external ECMAscript file called "script.js" which is linked to every svg I create, so it is also possible for me to program this in this script, but I am not sure how.

感谢任何提示.

推荐答案

假设我们有一个带有onmouseover和onmouseout触发器的圆:

Say we have a circle with onmouseover and onmouseout trigger:

<circle id="mycircle" cx="100" cy="100" r="50" fill="blue" stroke="red" stroke-width="3" onmouseover="myOpacity(0.5)" onmouseout="myOpacity(1.0)"/>

在纯JS中还有myOpacity()函数:-

And myOpacity() function in pure JS:-

function myOpacity(op_value) 
{
  myCircle = document.getElementById('mycircle');
  myCircle.setAttribute('opacity', op_value);
}

注意:您也可以尝试使用onmousedown和onmouseup触发器.

Note: You can also try onmousedown and onmouseup triggers.

这篇关于交互式SVG-如何选择元素以对鼠标悬停动作做出反应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！