2

サイト上の画像を異なる幾何学的形状であるかのようにレンダリングしようとしています。たとえば、通常は正方形の画像を、六角形、円、五角形、八角形などとして表示できます。

これはレスポンシブ サイトです。つまり、元の画像は でスタイル設定max-width: 100%;され、コンテナ要素に応じてサイズが変更されます。

私が最初に考えたのは、いくつかの透明なPNG「オーバーレイ画像」を作成し、必要な幾何学的形状を透明領域に「ノックアウト」してz-indexから、元の画像の上にマスクをオーバーレイすることでした。

キャンバスまたは SVG (またはその他のもの) でこれを行うより良い方法はありますか? ブラウザー ウィンドウのサイズが変更されたときに画像とマスクのサイズを均等に変更できますか? どのようなパフォーマンスの考慮事項を考慮する必要がありますか?

最終的な製品コードは jQuery を使用するため、これらのアプローチのいずれかで jQuery が必要な場合は、jQuery が使用されます。

4

1 に答える 1

4

SVG 内に画像を埋め込み、クリップ パス ( Tinkerbin )を使用できます。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="100%" height="100%" viewBox="0 0 100 100">
  <clipPath id="clipCircle">
    <circle r="50" cx="50" cy="50"/>
  </clipPath>
  <clipPath id="clipTriangle">
    <polygon points="0 0 50 100 100 0"/>
  </clipPath>
  <image clip-path="url(#clipCircle)" preserveAspectRatio="none" width="100%" height="100%" xlink:href="http://upload.wikimedia.org/wikipedia/commons/e/e5/Catopsilia_pomona_3_by_kadavoor.jpg"/>
</svg>
<button onclick="document.getElementsByTagName('image')[0]
              .setAttribute('clip-path','url(#clipTriangle)')">
  change clip path
</button>

ボタンをクリックして、円マスクを三角形マスクに変更します。

于 2012-12-04T22:42:41.690 に答える