【25-2】clip-pathプロパティで SVGのパスを使って切り抜こう

最終更新日:2018年02月20日  (初回投稿日:2018年02月13日)

前回clip-pathプロパティ<basic-shape>(基本シェイプ)を使いました。
今回は、SVGで切抜き用のパスを作って clip-pathプロパティで呼び出してみます。

<basic-shape>(基本シェイプ)は、四角形、円形、ポリゴンが用意されていましたね。
これだけでもけっこうイケそうだけど、曲線と直線が組み合わさった形(例えばクローバーとか)は無理です。ロゴマークなどの複雑な図形で切り抜きたい場合も基本シェイプだけでは不可能。
それが、SVGなら可能になります。

本日のINDEX
  1. SVGの <clipPath>要素でクリッピングパスを作ろう
  2. 複数のパスを同時にクリッピングパスとして指定する
  3. SVGならテキストでも切り抜けます
  4. 外部SVGファイルからクリッピングパスを呼び出す(Firefoxのみ)
  5. SVGの <clipPath>も作れる「Clip Path Generator」

clip-pathプロパティ関連は記事を3つに分けています

【25-1】切り抜き表示のための新しいプロパティ clip-path
CSSの「基本シェイプ」による切抜きを中心にサンプルを見ていきましょう
【25-2】clip-pathプロパティで SVGのパスを使って切り抜こう ←今日はココ
SVGのパスを使って切り抜きます。
【25-3】クリッピングに便利! shape-outside と shape-margin
切り抜いた要素の余白を取ってくれるshape-outsideプロパティと、その切抜き後のシェイプにマージンをつけてくれる shape-marginプロパティを使います。

参考:clip-pathプロパティ(勧告候補)↓
CSS Masking Module Level 1 - W3C Candidate Recommendation | 5.1 Clipping Shape: the clip-path property

内部SVG(SVGを HTML文書内に書く方法)なら、多くのブラウザで対応しています。
外部SVGファイルでの切抜きは、Firefox のみ対応です。
IE11, Edge, Opera Mini は clip-pathプロパティそのものに未対応です。(2018年2月記)

SVGの <clipPath>要素でクリッピングパスを作ろう

SVGの <clipPath>要素を使ってパスを作り、clip-pathプロパティで呼び出します。

サンプルを見てください。
わかりやすいように背景に薄いグレーを指定した親要素で囲んでいます。
対応ブラウザでご覧ください)

HTMLはこちら。

<div class="sample">
 <img class="clip-svg1" src="img.jpg"> <!--ここにimg要素-->
 <svg version="1.1" height="0" width="0"> <!--ここからSVG-->
  <defs>
   <clipPath id="cpath1">
     <path d="M241.438,(〜長いので略〜)241.438,61.367z"/>
   </clipPath>
  </defs>
 </svg>
</div>

パスの部分(6行目)は、Illustrator で描いています。
★図形を Illustrator で描いて SVGに書き出す方法は、こちらをご覧ください。
[70-1] svg要素でベクターグラフィクスを埋め込もう - Illustratorで描いて<svg>要素で埋め込む

切抜きに使いたいパスを <clipPath>要素内に入れます。
<clipPath>要素には、あとで CSSで呼び出すために id を付けておきます(5行目)

その <clipPath>要素<defs>要素で囲んでおきます(4、8行目)
<defs>要素は、表示する図形ではなく、後で使用するオブジェクトを定義します。
これが無くても動作しますが、一応お約束として書いておきました。

最後に <svg>要素には height="0" width="0" を指定しておくのを忘れずに(3行目)
コレが無いと <svg>要素の領域も HTML上に確保されちゃうので、スペースがガバッと空きます。
<defs>要素や <clipPath>要素の内容は、図形は表示されないけど、スペースは空く。
(SVGスプライトの時のように、display: none にしたくなりますが、これはNG。display: none だとクリッピングパスが表示されません)

次に CSSは以下のように指定しています。

.sample { /*サンプルではわかりやすいようにdivで囲んで背景色を付けてます*/
	width:280px;
    height:auto;
    background:rgba(204,204,204,.2)
    }
.sample img {
	width:100%;
    height:auto
    }
.clip-svg1 { /*img要素のクラス名です*/
	-webkit-clip-path:url(#cpath1); /*Safari, iOS Safari 用*/
	clip-path:url(#cpath1)
    }

clip-pathプロパティで、さきほど <clipPath>要素に付けた id を url() で呼び出すだけ。(11〜12行目)

複数のパスを同時にクリッピングパスとして指定する

<clipPath>要素で囲んだ中に、複数のパスを入れると、それらを同時にクリッピングパスとして使うことができます。
下のサンプルでは、大きさの違う円を6個使ってクリッピングしています。

HTMLはこちら。

<div class="sample">
 <img class="clip-svg2" src="img.jpg">
 <svg version="1.1" height="0" width="0">
  <defs>
   <clipPath id="cpath2">
    <circle cx="160" cy="105" r="84"/>
    <circle cx="220" cy="40" r="38"/>
    <circle cx="225" cy="148" r="32"/>
    <circle cx="90" cy="120" r="32"/>
    <circle cx="75" cy="43" r="18"/>
    <circle cx="50" cy="175" r="15"/>
   </clipPath>
  </defs>
 </svg>
</div>

CSSはこちら。

.clip-svg2 {
	-webkit-clip-path:url(#cpath2);
	clip-path:url(#cpath2)
    }

SVGならテキストでも切り抜けます(CSSを使わない方法)

SVG の 切抜き用パスの部分に <text>要素を使えば、文字で切り抜くこともできます。

ただ、ちょっと今までと違った書き方、CSSの clip-pathプロパティを使わない方法でサンプルを作ってみました。
画像を HTML の <img>要素ではなく、SVG の <image>要素で扱って <svg>要素の中に仕込みます。

flowers & Bee

HTMLはこちら。(Webフォント用に CSSもちょっと使っていますが)

<style>
/*Webフォントを @importで読み込んでいます*/
@import url(https://fonts.googleapis.com/css?family=Chewy);
</style>

<div class="sample">
<svg version="1.1" viewBox="0 0 280 196">
 <defs>
  <clipPath id="cpath3">
   <text font-size="45px" x="10" y="60%" textLength="260" 
   font-weight="bold" font-family="Chewy">flowers & Bee</text>
  </clipPath>
 </defs>
 <image width="280" height="196" x="0" y="0" clip-path="url(#cpath3)" xlink:href="img.jpg"></image>
</svg>
</div>

SVG の <image>要素に「clip-path属性」で クリップパスの idを指定します(14行目)

それにしても、CSS の clip-pathプロパティ、SVG の <clipPath>要素、clip-path属性と...ややこしいですね!

SVGの <text>要素では、CSSの font-size、font-weight、font-family なども指定できます(10〜11行目)
フォントは Google Fonts を使ってみました。CSSで @import url() で指定すれば簡単です(3行目・11行目)

clip-path での テキストの切抜きは webkit系で表示されない

CSS の clip-pathプロパティを使うと、 webkit系のブラウザで表示されないです。
Firefox(moz系)では表示されるんですが。(2018年2月記)

下が clip-pathプロパティを使ったサンプル。FIrefoxをお持ちの方はそれでご覧ください。

flowers & Bee

HTMLはこちら。

<div class="sample">
 <img class="clip-svg4" src="img.jpg">
 <svg version="1.1" height="0" width="0" viewBox="0 0 280 196">
  <defs>
   <clipPath id="cpath4">
    <text font-size="45px" x="10" y="60%" textLength="260" 
    font-weight="bold" font-family="Chewy">flowers & Bee</text>
   </clipPath>
  </defs>
 </svg>
</div>

CSSはこちら。

.sample {width:280px; height:auto; background:rgba(204,204,204,.2)}
.sample img {width:100%; height:auto}
@import url('https://fonts.googleapis.com/css?family=Chewy');
.clip-svg4 {
	-webkit-clip-path:url(#cpath4);
	clip-path:url(#cpath4)
    }

この場合、<svg>要素に「viewBox属性」が無いと(HTMLの3行目)、Firefoxでも、テキストの x、y座標が取得できずに正しく表示されませんでした。

外部SVGファイルからクリッピングパスを呼び出す

外部SVGファイルからクリッピングパスを呼び出すこともできます。
が、これは今のところ Firefoxのみ対応。(2018年2月)

Firefox ではこんな風に切り抜かれています(↓コレは画像です)
クリックでサンプルファイルが別ウィンドウで開きます。

HTMLはこちら。

<div class="sample">
 <img class="clip-svg5" src="img/image.jpg">
</div>

外部SVGファイルの内容です。

<svg version="1.1" viewBox="0 0 280 196" xmlns="http://www.w3.org/2000/svg">
 <defs>
  <clipPath id="cpath5">
   <path d="M164,195c53.028-43.877,101.5-79.773,(長いので略)151.123,164,195z"/>
  </clipPath>
 </defs>
</svg>

CSSはこちら。

.sample {width:280px; height:auto; line-height:0}
.sample img {width:100%; height:auto}
.clip-svg5 {
	-webkit-clip-path:url(../svg/clip-svg5.svg#cpath5);
	clip-path:url(../svg/clip-svg5.svg#cpath5)
    }

CSSファイルは「css」ディレクトリに、その外の「svg」ディレクトリに clip-svg5.svg ファイルがあります。

これも早くすべてのブラウザで対応するといいですね。
外部SVGファイルを作るだけなので、とってもスッキリして便利です。

SVGの <clipPath>も作れる「Clip Path Generator」

SVGの <clipPath> のコードも自動で書き出してくれるオンラインサービスがあります。

Clip Path Generator - CSS Plant(クリックで別ウィンドウで開きます)

Chrome や Safari では「基本シェイプ」を使い、Firefox では SVGのパスを使うという親切設計。
ポリゴンしか描けないけど、ちょっといじってみて、ソースの書き方を理解するのに役立ちます。

次回予告

clip-pathプロパティの値のうち、前回の <basic-shape>(基本シェイプ)で切り抜いた要素に float を使った時に、その切り抜いたシェイプのとおりにテキストを回り込ませることができる shape-outsideプロパティがあります。次回はコレを使ってみます。

円やポリゴンで切り抜いた要素の横に、そのシェイプに沿うようにテキストを回り込ませられます。
コレはまだ「草案」なんですが、clip-pathプロパティに対応したブラウザではもう使えます。

また、切り抜いた形にマージンを付けられる shape-marginプロパティも使ってみましょう。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.