SVG：將填充顏色應用於懸停的「蒙版」圖像

Question

我使用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> 

Answer 1

您可能需要使用濾鏡效果給了在圖像上懸停一些顏色（see Tinkerbin）：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100"> 
    <style type="text/css"> 
    image:hover { 
     filter:url(#Matrix); 
    } 
    </style> 
    <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> 
    <filter id="Matrix" filterUnits="objectBoundingBox" 
      x="0%" y="0%" width="100%" height="100%"> 
     <feColorMatrix type="matrix" in="SourceGraphic" 
      values="1 0 0 0 .5 
        .1 .9 0 0 0 
        .1 0 .9 0 0 
        0 0 0 1 0"/> 
    </filter> 
    </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> 

編輯：關於過濾器的一些解釋：

應用的過濾器更改每個光柵像素的顏色。它取其原始顏色值，將<feColorMatrix>指定的矩陣應用於顏色矢量，並且生成的顏色矢量變爲顯示的顏色。

矩陣是如何工作的？

矩陣由四行組成。第一行計算新的紅色分量，第二行計算綠色分量，第三個藍色分量，第四個alpha分量。

每行五個數字的含義是什麼？第一個數字乘以原始顏色的紅色分量，第二個數字乘以綠色，第三個藍色，第四個阿爾法。將所有四種產品進行彙總，並添加行中的第五個值（作爲不依賴於任何原始顏色成分的常數）。

讓我們看一下上面的例子：假設我們有一個顏色值的灰色像素像

rgba(25%,25%,25%,1) 

會是什麼導致紅色值？其計算所述紅色值的第一行是

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％。其他組件是類似計算的。

Answer 2

不知道這是否正是你想要的。鼠標事件不會發送到cliparea外的區域。快速&髒，在IE9中工作，未在FF中測試例如。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100"> 
    <script type="application/ecmascript"> 
     function fillit(evt) { 
      document.getElementById('fillarea').setAttribute('display', 'visible'); 
     } 

     function emptyit(evt) { 
      document.getElementById('fillarea').setAttribute('display', 'none'); 
     } 
    </script> 
    <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)" onmouseover="fillit(evt)" /> 
     <rect x="0" y="0" width="100%" height="100%" fill="red" display="none" 
       id="fillarea" clip-path="url(#hexagon)" onmouseout="emptyit(evt)" /> 
    </g> 
</svg>