css3 clip pathをSVGのインラインで書く
ここらへんを見て、さっくりできると思ったらすごいハマったのでメモ
結論、web上で見かける使い方ではWEBデザインに使うには実用に耐えなかった。
- ポイント1
<svg height="0" width="0" style="position:absolute"> </svg>
svgのインラインの定義でheight="0" width="0",style="position:absolute"を設定すること
これをしないと、実際にsvgの領域が確保されてデザインが崩れる。
タグの下にsvgタグを設定するとあるが、実際には、上記の設定がされていれば、svgのタグ設置はどこでもよい。
上記のデモの場合タグの下に空白のsvg領域が確保されているので、それっぽく動いているように見えるが、
実際問題として
- ポイント2
<clipPath id="svgPath" clipPathUnits="objectBoundingBox">
clipPathUnits="objectBoundingBox" を設定する。
- How to apply SVG clipPath to HTML element that is not in the top left corner of document in webkit browsers - HTML & CSS - The SitePoint Forums
- Clipping and Masking in CSS | CSS-Tricks
There is a rather significant issue with using SVG-defined clip paths though: they are pinned to the upper left of the document. … I’m probably just missing something, but I’m not finding an obvious way to get the path to move along with the element it’s applied to, like the way clip-path works if you use a basic element right in the CSS.
これを設定しないと，HTMLの左上が原点となってクリッピングがされる。
つまり、実質ヘッダ画像等でないとクリップできない。
なので上記デモで、svgタグを上に設定すると、そのsvg領域分クリッピング対象がずれて
クリッピングができなくなる。
尚、clipPathUnits="objectBoundingBox"にすると単位がpixelベースから比率%ベースに変更になるので注意が必要。
100%=1になるので、データを変更してあげる必要がある。pxなどに単位指定不可
クリップ対象のdivが可変する場合は、アスペクト比がくずれる可能性がある。
