2019年8月13日 星期二

SVG 的圖形剪裁- clip-path

要在 svg 使用 clip-path 可以直接使用已經繪製好的圖形,先用 clipPath 來定義想要拿來當 clip-path 的形狀後,再使用 css 的 clip-path 去指定圖形就可以了,使用的方法為 clip-path:url(定義的形狀),以下則為使用的方法以及把 clip-path 的位置蓋在圖形上位置的表示圖。

See the Pen
svg clip-path
by deathhell (@deathhell)
on CodePen.



比較複雜的形狀以及文字都可以拿來當 clip-path

See the Pen
svg clip-path text
by deathhell (@deathhell)
on CodePen.

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...