0

我正在尝试制作一个交互式 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，所以我也可以在这个脚本中编程，但我不确定如何。

感谢您的任何提示。

4

1 回答 1

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触发。

于 2013-06-13T18:14:31.907 回答