要素や画像を好きな形に、四角、丸、楕円、多角にトリミングができる CSSのclip-pathのまとめ
以前、clip-path を使ってpolygonで多角形にくり抜く方法を紹介しましたが
今回は、それ以外にもある 丸、楕円 を紹介 (四角形系もありますが 再現出来なかったので今回は省略)
以前紹介したものはこちら
自由な形に画像の切り抜きができるSVGのclip-path polygonを CSSで行う
clip-path: 図形の種類(パラメータ);
図形の種類のところにに入るもの
- circle = まんまるな円
- ellipse = 楕円
- plygon = 多角形
- url = SVGを指定
CSSのみで完結できるのが 上の3つの circle,ellipse,polygon です
urlにはSVGファイルへのパス もしくはHTML内に書かれた SVGへのIDの指定で利用出来ます(こちらは最後のほうで)
現在CSSのみで完結する書き方が使えるブラウザは webkit系のみのようですので
実際に使用する場合には、-webkit-clip-path:; という風にプレフィックスを付けてやる必要があります
circle clip-path: circle(円の半径 at 座標X 座標Y);
まんまるな円にトリミングする場合には上のような書き方になります
at より前は円の半径
at の後ろには 円の中心点の座標を指定します
円の半径にはpxで座標は％で指定出来ます
例
clip-path: circle(131px at 64.6% 45.95%);
ellipse clip-path: ellips(横の半径 縦の半径 at 座標X 座標Y);
楕円にトリミングする場合は、まんまるの円ときと少しパラメータの書き方が違います
まんまるな円の場合は半径のみでしたが、楕円の場合は横方向の半径、縦方向の半径を指定することで楕円を作ります
座標の指定の仕方は、circleのときと同様です
例
clip-path: ellipse(171px 114px at 65.2% 41.15%);
polygon clip-path: polygon(ルール,X1座標 Y1座標,X2座標 Y2座標.X3座標 Y3座標, ・・・・);
ポリゴンは多角形の形にクリッピングします
3点以上が必要です
それぞれの点は X座標とY座標を使って指定します、ひとつの点ごとにカンマで区切ります
座標の数は無制限に指定出来ます
また、ルールとして nonzero と evenodd があります
初期値では nonzero となってます
点と点の線が 他の点と点の線と交差を繰り返した時の処理の違いを決めるものです
省略した場合は nonzero として動きます
nonzero の場合は、重なりある線の内側の領域もクリッピングします
evenodd の場合は線と線で囲まれた領域だけをクリッピングします
簡単な例では、 5点の星を一筆書きした場合に 星そのもの全てが領域になるのが nonzero
星の外側の三角形の部分だけがクリッピングの領域になるのが evenodd です
nonzero の場合
clip-path: polygon(nonzero, 270px 157px, 143px 69px, 293px 65px, 176px 157px, 218px 24px);
evenodd の場合
clip-path: polygon(evenodd, 270px 157px, 143px 69px, 293px 65px, 176px 157px, 218px 24px);
座標はpxで指定出来ます
SVG clip-path: url(SVGへのパス);
こちらの方法を使うとfirefoxのブラウザでclip-pathが使えます
SVGへのファイルを指定して使う方法と、HTMLにあるSVGへIDで指定してつかう方法があります
SVGファイルへのパスで指定
clip-path: url(svg.svg); //webkit系の場合
clip-path: url(svg.svg#svg-clip); //firefoxの場合
HTML中のSVGを指定
clip-path: url(#svg-clip);
HTML中のSVGにIDを指定して、そのIDをclip-pathで指定することでクリッピングできる
HTML
<clipPath id=”svg-clip”>
<circle cx=”150″ cy=”150″ r=”50″ />
</clipPath>
SVGで指定する場合は、SVGの書き方なのでCSSでのパラメータの書き方が違います
参考 URL
http://www.w3.org/TR/SVG/masking.html
http://docs.webplatform.org/wiki/css/properties/clip-path
COMMENT