SVGを使ったクリッピングマスク – browser-land

SVGを使ったクリッピングマスク

 クリッピング

クリッピングとは、ある要素のうちクリップ領域を除去することを指します。
clipPath要素を使う事で任意のクリップ領域を定義します。
clip-path属性にclipPath要素を設定することで適用する事が出来ます。

・STEP.1 imgタグに画像を表示する

<img src=”wood.jpg” width=’100′ height=’100’>

・STEP.2 clipPath要素を使う

<svg xmlns=’http://www.w3.org/2000/svg’ width=’100′ height=’100′ viewBox=’0 0 100 100’>
<clipPath id=”svgPath”>
<circle cx=’50’ cy=’50’ r=’20’ fill=’#f2e26d’/>
<rect x=47.5 y=0 width=5 height=100 fill=’#f2e26d’/>
<rect x=0 y=47.5 width=100 height=5 fill=’#f2e26d’/>
<rect x=47.5 y=0 width=5 height=100 transform=’translate(50 -20) rotate(45)’ fill=’#f2e26d’/>
<rect x=0 y=47.5 width=100 height=5 transform=’translate(50 -20) rotate(45)’ fill=’#f2e26d’/>
<path d=’
 M 3 50
 A 47 47 0 1 0 97 50
 A 47 47 0 1 0 3 50 Z
 M 92 50
 C 92 75.2 75.2 92 50 92
 C 24.8 92 8 75.2 8 50
 C 8 24.8 24.8 8 50 8
 C 75.2 8 92 24.8 92 50 Z
‘ fill=’#f2e26d’/>
</clipPath>
</svg>

SVG画像を描画していますが、実際のclipPath要素は表示されません。

・STEP.3 clip-path属性にclipPath要素を設定する

<img src=”wood.jpg” width=’100′ height=’100′ style=’clip-path:url(#svgPath);’>

clipPath要素はSVG画像と異なり、img要素に適したサイズに自動的に拡大・縮小が出来ません。
よってimg要素のサイズとclipPath要素のサイズが異なる場合には以下の方法をとる必要があります。

1. clipPath要素をimg要素のサイズに合わせて作り直す。
2. clipPath要素にtransfrom:scale()を設定し、img要素のサイズに修正する。
3. img要素をclipPath要素のサイズに設定し、transfrom:scale()でサイズを修正する。

Browser-Land

: DATA

: BLOG

All
CSS
HTML5
JavaScript
WordPress

: MAIL


 

 

 

: PRAVACY POLICY

タイトルへ

サウンド設定

スクリーン設定

プレイ
データ
設定
停止
次へ
戻る
戻る
戻る
削除
再配置
戻る
戻る
メール
ブログ
Twitter
ポリシー
ユニット
武器
サークル
ボックス
コード
キング
ソルジャー
アーチャー
ウィザード
スペーサー
ギア
ホイール
クランク
フレームA
フレームB
レール
ウォール
ワイヤー
ゴム紐
カップ
大砲
弾倉
ウッド材
アイアン材
透過材
+5 deg.
-5 deg.
+45 deg.
-45 deg.
右回転
左回転
動力無し
Turn Right
Turn Left
Neutral
ロード
セーブ
バトル
ロード