最近 SVG を触ってて、ちょっとはまったのでメモ。

クリッピングパスの基本

クリッピングパスは対象の塗りを適用する範囲を別のパスによって制限する方法のこと。

hoge.svg

:
<def>
  <symbol id="hoge">
    <rect fill="#F00" width="100" height="100" />
    <rect fill="#0F0" width="100" height="100" x="10" y="10" />
    <rect fill="#00F" width="100" height="100" x="20" y="20" />
  </symbol>
</def>
<clipPath id="moja">
  <path stroke="none" fill="#000" d="M0 0 L100 25 130 130 25 100 0 0"/>
</clipPath>
<g clip-path="url(#moja)">
  <use xlink:href="#hoge" />
  <use xlink:href="#hoge" x="30" y="30" />
</g>
:

こんな感じで <clipPath/> で定義したものを clip-path="url(#id)" で指定して使う。こうすることで、連続する矩形の塗りを id = "moja" の描画領域で制限することできる。

ClipPath の中をいじる

<clipPath/> の中にある <path/> をシンボル化してみる。

hoge.svg

:
<def>
  <symbol id="hoge">
    <rect fill="#F00" width="100" height="100" />
    <rect fill="#0F0" width="100" height="100" x="10" y="10" />
    <rect fill="#00F" width="100" height="100" x="20" y="20" />
  </symbol>
  <symbol id="test">
    <path stroke="none" fill="#000" d="M0 0 L100 25 130 130 25 100 0 0"/>
  </symbol>
</def>
<clipPath id="moja">
  <use xlink:href="#test" />
</clipPath>
<g clip-path="url(#moja)">
  <use xlink:href="#hoge" />
  <use xlink:href="#hoge" x="30" y="30" />
</g>
:

変更点は <clipPath/> の moja の中の <path/> を <symbol/> にして外に出しただけだ。
こうするとなにも表示されなくなる。 <symbol/> を <g/> などにしてもだめだった。

Path を直接参照してみる

hoge.svg

:
<def>
  <symbol id="hoge">
    <rect fill="#F00" width="100" height="100" />
    <rect fill="#0F0" width="100" height="100" x="10" y="10" />
    <rect fill="#00F" width="100" height="100" x="20" y="20" />
  </symbol>
  <path id="test" stroke="none" fill="#000" d="M0 0 L100 25 130 130 25 100 0 0"/>
</def>
<clipPath id="moja">
  <use xlink:href="#test" />
</clipPath>
<g clip-path="url(#moja)">
  <use xlink:href="#hoge" />
  <use xlink:href="#hoge" x="30" y="30" />
</g>
:

変更点は <symbol/> の中で定義されていた <path/> を単独で定義してみただけ。また表示されるようになった。
どうやら、 <clipPath/> の中で <use/> を使って参照するものは <path/> や <text/> や基本図形¹などを直接参照する場合に限るらしい。

クリッピングパスの中でグループ化したものを使いたい場合

直接参照しかできないので、当然グループ化した構造を <use/> で参照することはできない。
どうしたらいいかと思ったけど、グループ化したものの中身にそれぞれに ID をふって、<clipPath/> 内でそれぞれ <use/> するしかないかと思われる。

ClipPath を定義する位置によるブラウザでの挙動の違い

最初は <defs/> 内に <clipPath/> を定義していた。Firefox では機能したが、Chrome では機能しなかった。
SVG もやっぱりブラウザでの挙動の違いが結構あるんだなぁ。²

rect や circle など ↩
みつを ↩