4

clipPathページ上の画像にさまざまな「マスキング」効果を適用するために使用しています。

各画像には、可変長のキャプションがあります。画像にカーソルを合わせたら、画像の上にキャプションを表示し、マウスアウトではキャプションを非表示にします。キャプションの長さが異なるため、テキストが画像の外に出ないように、テキストを適切に折り返す必要があります。

foreignObjectとを使って実験しましtextAreaたが、ホバー効果が正しく機能していないようです。

また、プレーンHTML（具体的には段落タグ）と絶対位置+z-indexを使用してテキストを配置しようとしましたが、テキストサイズはそれに応じて画像のサイズに比例しませんでした（SVGの一部ではなかったため）。

このプロジェクトではjQueryを使用しているので、JSソリューションが必要な場合は、jQueryを利用できます。

これが私が使っているHTML（そして必要ならjsFiddle）です：

<div class="featured-image" id="featured-image-one">
  <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 fill="#ff0000" 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)" />
      <foreignObject x="10" y="30" width="100" height="100" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
        <body xmlns="http://www.w3.org/1999/xhtml">
          <p style="color: #ffffff; font-size: 5px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </body>
      </foreignObject>
    </g>
  </svg>
</div>​
4

1 に答える 1

3

これをチェックしてください：http： //jsfiddle.net/LgAjd/4/

基本的にid、foreignObjectにを追加してスタイルを設定しdisplayたのでnone、デフォルトでは非表示になり、jQueryイベントバインディングを使用してホバー条件を処理しました。

Javascriptコード：

$hoverText = $('#hoverText');
$('body').on('mouseover', '#featured-image-one', function () {
    $hoverText.show();
});
$('body').on('mouseout', '#featured-image-one', function () {
    $hoverText.hide();
});
于 2012-12-12T23:15:53.257 に答える