使用SVG路径对对象进行剪裁

马黑黑

<style> .ma { position: relative; margin: 30px auto; width: 500px; height: 500px; background: linear-gradient(darkred, red, orange); clip-path: url(#svgPath); /* 使用SVG路径 */ } </style> <!-- svg路径设置 使用相对路径 --> <svg width="0" height="0"> <clipPath id="svgPath" clipPathUnits="objectBoundingBox"> <path d="M1,0.5 Q0.447,0.5,0.618,1 Q0.447,0.5,0,0.809 Q0.447,0.5,0,0.191 Q0.447,0.5,0.618,0 Q0.447,0.5,1,0.5" /> </clipPath> </svg> <div class="ma"></div>

马黑黑

要点：

1. 需要创建 svg 标签，该svg仅装载 clipPath 路径待用，因此svg的宽高均设置为 0；

2. svg clipPath 添加 clipPathUnits 属性，取值 objectBoundingBox，这将开启相对路径，它将能使用使用该剪裁路径对象的尺寸；

3. svg clipPath 标签需要有 id 属性；

4. 在 CSS 代码中，带剪裁元素对应的选择器应用上述svg剪裁路径，注意格式（代码第 8 行）。

不是所有的自设或找来的路径都可以应用相对路径效果。如果不能使用，有两个选择：其一，可以将 clipPathUnits="objectBoundingBox" 去掉，此时，剪裁对象的尺寸应固定为路径所支持的尺寸；其二，继续使用 clipPathUnits="objectBoundingBox"，此时需要使用相关工具转换路径，最简单且非常有效的线上工具我存有一个免费开源的：Clip-path converter

红影

去运行代码看了一下，这个裁剪出来的还很漂亮呢

红影

在css中引用svg路径，然后设置路径，就能实现想要的效果了吧

马黑黑

红影 发表于 2025-8-7 20:58
在css中引用svg路径，然后设置路径，就能实现想要的效果了吧

这也是一种剪裁的实现方法。CSS clip-path 的一个可选值是 url() 函数，它需要一个 #id 值，该值来自 SVG 标签下的子元素 <clipPath ... />

马黑黑

红影 发表于 2025-8-7 20:57
去运行代码看了一下，这个裁剪出来的还很漂亮呢

这个看路径和剪裁对象的色彩设计

花飞飞

马黑黑 发表于 2025-8-7 20:41 要点： 1. 需要创建 svg 标签，该svg仅装载 clipPath 路径待用，因此svg的宽高均设置为 0；

这个网站进去每次都不一样的图案。。。挑了一个试了一下

花飞飞

真是好看，背景除了渐变色还支持图片的吧。。自设路径果然出不来，按方法去掉clipPathUnits="objectBoundingBox"之后就出来了。

杨帆

漂亮，剪裁的一种新路径，谢谢马老师经典分享

马黑黑

杨帆 发表于 2025-8-7 22:47
漂亮，剪裁的一种新路径，谢谢马老师经典分享

马黑黑

花飞飞 发表于 2025-8-7 22:42
本帖最后由 花飞飞 于 2025-8-7 22:46 编辑 真是好看，背景除了渐变色还支持图片的吧。。自设路径果然出不 ...

这个不是问题

马黑黑

花飞飞 发表于 2025-8-7 22:33
这个网站进去每次都不一样的图案。。。挑了一个试了一下

        .maa {

好几个是自带的，也可以将自己的路径带过去

花飞飞

马黑黑 发表于 2025-8-7 23:39
这个不是问题

小白跟着写下作业还是挺有成就感的

花飞飞

马黑黑 发表于 2025-8-7 23:40
好几个是自带的，也可以将自己的路径带过去

我得收藏起来，
带过去是什么情况，我去试试

马黑黑

花飞飞 发表于 2025-8-8 09:02
我得收藏起来，
带过去是什么情况，我去试试

也是带路径，和它默认的路径结构一样，它会帮你转换成可以通过设置 clipPathUnits="objectBoundingBox" 达到路径可以相对引用的新的路径。

马黑黑

花飞飞 发表于 2025-8-8 09:01
小白跟着写下作业还是挺有成就感的

花飞飞

马黑黑 发表于 2025-8-8 12:48
也是带路径，和它默认的路径结构一样，它会帮你转换成可以通过设置 clipPathUnits="objectBoundingBox"  ...

看了，没找到转换的地方。。可能我的电脑显示的功能不全

花飞飞

马黑黑 发表于 2025-8-8 12:50

乐滋滋美一个

红影

马黑黑 发表于 2025-8-7 21:15
这也是一种剪裁的实现方法。CSS clip-path 的一个可选值是 url() 函数，它需要一个 #id 值，该值来自 SVG ...

这个应该属于引用方式吧，也可以直接使用路径吧

红影

马黑黑 发表于 2025-8-7 21:16
这个看路径和剪裁对象的色彩设计

嗯嗯，路径漂亮，背景或选用的图图漂亮，弄出来的定然很美