ほんっとにはじめての HTML5 と CSS3

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

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

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>要素の中に仕込みます。

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をお持ちの方はそれでご覧ください。

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プロパティも使ってみましょう。

関連記事

• 【26-6】line-heightプロパティで 行間（行の高さ）を指定しよう
• 【26-5】font-styleプロパティでフォントを斜体に指定しよう
• 【26-4】font-stretch で condensed などの文字幅を選択しよう
• 【26-3】font-weightでフォントのウェイト（太さ）を指定しよう
• 【26-2】font-sizeプロパティでフォントのサイズを指定しよう
• 【26-1】font-familyプロパティでフォント（書体）を指定しよう
• 【25-3】クリッピングに便利！ shape-outside と shape-margin
• 【25-2】clip-pathプロパティで SVGのパスを使って切り抜こう
• 【25-1】切り抜き（クリッピング）のための新プロパティ clip-path
• 【24】要素を切り抜き表示する clipプロパティ（非推奨ですが）
• 【23-2】重なり順のルールと 新しいスタックコンテキストができる条件
• 【23-1】要素の重なり順の上下関係を指定する z-indexプロパティ
• 【22-4】スクロールしていくとピタッと固定する position: sticky
• 【22-3】要素を固定位置に指定する position: fixed
• 【22-2】要素を絶対位置に指定する position: absolute