Javascript SVG：将填充颜色应用于；蒙面的；悬停图像

我正在使用

clipPath

对图像应用不同的“掩蔽”效果

如何使用悬停时的颜色填充剪裁的图像？我曾尝试在CSS中使用

：hover

，但这似乎不起作用，除非我针对的是不正确的元素

我在这个项目中使用jQuery，所以如果需要JS解决方案，我可以使用jQuery

以下是我正在使用的HTML：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
  <defs>
    <clipPath id="ellipse">
      <ellipse cx="50" cy="35.5" rx="49.5" ry="35" />
    </clipPath>
    <clipPath id="hexagon">
      <polygon points="25, 0  75, 0 100, 43.30127018922193 75, 86.60254037844386  25, 86.60254037844386  0, 43.30127018922193"/>
    </clipPath>
    <clipPath id="rectangle">
      <rect x="0" y="0" width="100" height="70"></rect>
    </clipPath>
  </defs>
  <g>
    <image preserveAspectRatio="none" x="0" y="0" width="100%" height="100%" xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Bucephala-albeola-010.jpg/800px-Bucephala-albeola-010.jpg" id="clippy" clip-path="url(#hexagon)">
  </g>
</svg>

---

您可能希望使用过滤效果在悬停（）时为图像赋予一些颜色：

得到的红色值是多少？计算红色值的第一行是

1 0 0 0 .5

我们计算如下：

  1*r   + 0*g   + 0*b   + 0*a + .5
= 1*.25 + 0*.25 + 0*.25 + 0*1 + .5 = .75

---

这意味着，像素的结果红色分量为75%。其他组件的计算是类似的。

不确定这是否正是您想要的。鼠标事件不会发送到cliparea之外的区域。Quick&dirty，适用于IE9，例如，尚未在FF中测试

函数填充（evt）{
document.getElementById（'fillarea'）.setAttribute（'display'，'visible'）；
}
函数emptyit（evt）{
document.getElementById（'fillarea'）.setAttribute（'display'，'none'）；
}

干得好Thomas W.我不知道你可以用CSS来做这件事。令人惊叹的！托马斯W，太好了。非常感谢。乍一看，计算

值有点复杂。你知道有什么工具可以帮你吗？也许可以粘贴十六进制值或rgb值并生成矩阵？@ctrlaltdel:为了自动生成

feColorMatrix

的值，实际上需要五个颜色对，每个颜色对由“原始”颜色和矩阵映射到的颜色组成。（至少在我很累的时候，我确信这一点。也许我应该在清醒的时候再考虑一下。）我编辑了这个问题，加入了一些关于矩阵的更多信息。

1 0 0 0 .5

  1*r   + 0*g   + 0*b   + 0*a + .5
= 1*.25 + 0*.25 + 0*.25 + 0*1 + .5 = .75