svg : clipPath 裁剪

马黑黑 · 发表于 2024-10-30 21:22

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

SVG 的 <clipPath> 标签定义剪裁形状，其内包含svg实体元素或path路径，目标元素即被裁剪对象则通过 clip-path 属性以 url(#id) 的方式调用剪裁标签、达成剪裁效果。语句结构举例如下：

<defs>
	<clipPath id="clip">
		<circle cx="150" cy="100" r="90" />
	</clilpPath>
</defs>
<rect x="10" y="10" width="180" height="180" fill="lightblue" clip-path="url(#clip)" />

解释：clipPath标签一般放在defs标签内，也可以独立存在。上面的代码示例，clipPath内的实体元素是一个圆形图案，它的位置和尺寸和将被裁剪的对象息息相关，设计裁剪形状时要注意这一点；同时，用做裁剪形状的元素，可以不着色，着色也没有意义。后面的矩形，从尺寸上分析，中心与圆重合，宽高尺寸和圆的直径一致，这样，矩形通过 clip-path 属性调用了clipPath标签，矩形裁剪出来的将是一个圆。

下面我们通过实例来进一步理解 clipPath 标签的用法：我们用一个path路径图案——它实际上是一个竖状椭圆——做剪裁形状，去裁剪中心点重合、尺寸相符的图片——

代码：

svg的外边框包裹的本是图片的整体呈现，现在，由于 image 标签使用了 clip-path="url(#clip1)"，图片只能按 clipPath 标签的路径（或形状）去呈现自己。

最后我们再来看一个例子，我们将在 clipPath 元素运行动画。以下效果，左边是裁剪后的最终样式，动画隶属于裁剪形状，即动画是 clipPath 元素的子元素运行的，换言之，这是一个动画形式的裁剪作品；右边是静态形式下裁剪形状（菱形）和被裁剪对象（圆）的同心圆叠加。

代码：

clipPath 还有一个 clipPathUnits 属性，用于定义坐标系，值有 userSpaceOnUse 和 objectBoundingBox，缺省值是 userSpaceOnUse，这里不做演示。