スキップしてメイン コンテンツに移動

投稿

11月, 2015の投稿を表示しています

SVGで画像を切り抜いてみよう

広がりつつあるSVG このところSVGがWebにも広がりつつあり、たまに聞くけど、結局どう使うの?何に使えるの?という質問があります。

実際にSVGを使うとこんなことができるよ、というサンプルを紹介したいと思います。



まずはじめに。 SVGはどんなブラウザでも同じように見えるわけではありません。

現在のところ、IE8以下、Android 4.3以下ではサポートしていません。
(参照 http://caniuse.com/#search=svg、2015年11月)

SVGはjpgのような画像ファイルではなく、イラストレータ等で扱われる「ベクターデータ」です。

その特徴としては、
・拡大・縮小をしても画像の劣化がないこと
・ハイパーリンクなどを画像中に埋め込むことができる
などがあります。

画像を組み合わせて任意の形に切り抜いたサンプル 今回用意するもの
・画像(jpgデータ)×3枚

サンプル
http://sample.creativeflake.com/svg/



まずは画像を並べる 今回は、大きな「shape-container」という枠に、クロワッサンの写真を背景として置きました。

そしてその中に「shape-center」と「shape-right」という入れ子を作り、それぞれの背景にコーヒーの写真、カップケーキの写真を置きました。



切り抜く 今回切り抜くのは、入れ子にした、「shape-center」と「shape-right」を平行四辺形に切り抜きます。
(※切り抜き方は任意の形でOK)

まずは「shape-center」。
画面サイズを100%として考えます。

切り抜きのスタート地点の座標を(x座標, y座標)=(40%, 0)としたときに、
そこからぐるっと平行四辺形を一周するように、各頂点の座標をそれぞれ、(20%, 100%), (60%, 100%), (80%, 0)となるようにします。



切り抜くCSSはclip-path: polygon(座標, 座標, ...) この座標に、一周ぐるっと値を入力します。



もう片方の画像も同じように もう片方の図形(shape-right)は台形に切り抜いていますが、こちらも同様、各座標を
(80%, 0),(60%, 100%),(100%, 100%),(100%, 0)
としています。



切り抜く方向は自…