Firefox 3.5 在 SVG 上支持的 Javascript 事件处理程序答案

【问题标题】：Javascript Event Handlers supported on SVG by Firefox 3.5Firefox 3.5 在 SVG 上支持的 Javascript 事件处理程序
【发布时间】：2010-12-15 21:25:16
【问题描述】：

我整天都在为此绞尽脑汁。 Firefox 3.5 支持的 SVG DOM 操作似乎非常有限。像 this.style.cursor 这样的一些属性可以通过 onmouseover 处理程序成功操作，但是像 this.style.fill 或 this.style.stroke 这样有趣的属性不能！

有人知道在鼠标悬停时实现边框/轮廓颜色的简单更改的更好方法吗？

或者 SVG 允许 DOM 操作的整个想法仅仅是一个丑陋的婴儿？

【问题讨论】：

哦，好吧。 SVG + JavaScript 恕我直言，是下一代开放网络的光辉未来的一部分。无意讽刺。

标签： javascript firefox svg

【解决方案1】：

看here。问题是，FF 中的style 属性实现确实很不完整。但是，您可以使用同样标准化的 setProperty() 方法来规避这一点：

svgElement.style.setProperty("fill-opacity", "0.0", "")

（第三个参数允许添加伪类）。

对于简单的鼠标悬停效果，请使用嵌入式（或外部）样式表：

<style type="text/css">
rect { fill: green; }
rect:hover { fill: red; }
</style>

【讨论】：

+1：在 Firebug 的快速测试中为我在 stroke 属性上工作。
@NickFitz：我现在多了几十根白发。我每花一小时就得到一个。

【解决方案2】：

我会为此使用 CSS。

#myrec:hover {
  /* set styles in here /*
}

同时检查这些库。

http://raphaeljs.com/ http://www.liquidx.net/plotkit/

【讨论】：

【解决方案3】：

公平地说，您似乎想要的操作只涉及 DOM 2 样式，而不是 SVG DOM。

【讨论】：