Question

我正在尝试创建一个交互式SVG，它可以对不同的用户操作做出反应（鼠标悬停，点击等）。我正在使用java Batik，但如果你只是描述我如何用XML解决我的问题就足够了。

点击功能对我很有用。问题在于悬停（鼠标悬停在动作上）。我的代码如下所示：

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

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

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

感谢您的任何提示。

Answer 1

假设我们有一个包含onmouseover和onmouseout触发器的圈子：

<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（）函数： -

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

注意：您还可以尝试onmousedown和onmouseup触发器。

交互式SVG - 如何选择元素以对鼠标悬停操作做出反应？

1 个答案: