2

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>
4

2 に答える 2

7

フィルター効果を使用して、ホバー時に画像に色を付けることができます ( 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>を色ベクトルに適用し、結果の色ベクトルが表示される色になります。

マトリックスはどのように機能しますか?

行列は 4 行で構成されます。最初の行は新しい赤の成分を計算し、2 番目は緑の成分、3 番目は青、4 番目のアルファを計算します。

各行の 5 つの数字の意味は何ですか? 最初の数値に元の色の赤の成分を掛け、2 番目に緑の成分を掛け、3 番目に青、4 番目にアルファを掛けます。4 つのすべての積が合計され、行の 5 番目の値も追加されます (元のカラー コンポーネントのいずれにも依存しない定数として)。

上記の例を見てみましょう: 次のような色の値を持つ灰色のピクセルがあるとします。

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% であることを意味します。他のコンポーネントも同様に計算されます。

于 2012-12-12T00:22:54.713 に答える
1

これがまさにあなたが望むものかどうかはわかりません。マウス イベントは、クリップ領域外の領域には送信されません。クイック＆ダーティ、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>
于 2012-12-12T00:34:51.930 に答える