马黑黑 发表于 2025-8-7 20:30

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

<div class="codebox" data-prev="1">
&lt;style&gt;
        .ma {
                position: relative;
                margin: 30px auto;
                width: 500px;
                height: 500px;
                background: linear-gradient(darkred, red, orange);
                clip-path: url(#svgPath); <txt-green>/* 使用SVG路径 */</txt-green>
        }
&lt;/style&gt;

<txt-green>&lt;!-- svg路径设置 使用相对路径 --&gt;</txt-green>
&lt;svg width="0" height="0"&gt;
        &lt;clipPath id="svgPath" <txt-red>clipPathUnits="objectBoundingBox"&gt;</txt-red>
                &lt;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" /&gt;
        &lt;/clipPath&gt;
&lt;/svg&gt;
&lt;div class="ma"&gt;&lt;/div&gt;
</div>

<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script>

马黑黑 发表于 2025-8-7 20:41

要点：

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

红影 发表于 2025-8-7 20:57

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

红影 发表于 2025-8-7 20:58

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

马黑黑 发表于 2025-8-7 21:15

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

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

马黑黑 发表于 2025-8-7 21:16

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

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

花飞飞 发表于 2025-8-7 22:33

马黑黑 发表于 2025-8-7 20:41
要点：

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


这个网站进去每次都不一样的图案。。。挑了一个试了一下
<style>
        .maa {
                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="M0.989,0.131 c-0.108,-0.082,-0.275,-0.131,-0.446,-0.131 c-0.211,0,-0.384,0.074,-0.473,0.202 c-0.042,0.06,-0.065,0.132,-0.069,0.212 c-0.003,0.072,0.009,0.151,0.036,0.237 c0.093,-0.278,0.352,-0.495,0.651,-0.495 c0,0,-0.28,0.074,-0.455,0.301 c0,0,-0.002,0.003,-0.006,0.009 c-0.035,0.047,-0.066,0.101,-0.089,0.162 c-0.039,0.093,-0.075,0.22,-0.075,0.373 h0.125 c0,0,-0.019,-0.119,0.014,-0.257 c0.055,0.007,0.104,0.011,0.148,0.011 c0.115,0,0.197,-0.025,0.258,-0.078 c0.054,-0.048,0.084,-0.112,0.116,-0.18 c0.048,-0.104,0.103,-0.222,0.263,-0.313 c0.009,-0.005,0.015,-0.015,0.016,-0.025 s-0.004,-0.021,-0.012,-0.027"" />
        </clipPath>
</svg>
<div class="maa"></div>

花飞飞 发表于 2025-8-7 22:42

本帖最后由 花飞飞 于 2025-8-7 22:46 编辑 <br /><br />真是好看，背景除了渐变色还支持图片的吧。。自设路径果然出不来，按方法去掉clipPathUnits="objectBoundingBox"之后就出来了。
<style>
        .ma0{
                position: relative;
                margin: 30px auto;
                width: 500px;
                height: 500px;
                background: url('https://642303.freep.cn/642303/tu/20240725haidi.webp') no-repeat center/cover;
                clip-path: url(#svgPath1); /* 使用SVG路径 */
        }
</style>

<!-- svg路径设置 使用相对路径 -->
<svg width="100" height="50">
        <clipPath id="svgPath1">
                <path d="m310.29249,52.84883l0,28.29044c-59.18432,3.98935 -105.79996,46.09556 -105.79999,97.44484c0,-9.25414 12.88002,-16.76469 28.75,-16.76469c15.86998,0 28.75,7.51055 28.75,16.76469c0,-9.25414 12.88002,-16.76469 28.75,-16.76469c7.5579,0 14.41662,1.75651 19.54999,4.54044l0,137.95953c0,6.16947 -4.12158,11.17649 -9.19999,11.17649c-5.07838,0 -9.2,-5.00702 -9.2,-11.17649l0,-5.58823l-18.4,0l0,5.58823c0,18.50822 12.36478,33.52942 27.6,33.52942c15.23518,0 27.60001,-15.02119 27.60001,-33.52942l0,-137.95953c5.13336,-2.78393 11.9921,-4.54044 19.54999,-4.54044c15.86998,0 28.75,7.51055 28.75,16.76469c0,-9.25414 12.88002,-16.76469 28.75,-16.76469c15.86998,0 28.75,7.51055 28.75,16.76469c0,-51.34931 -46.61564,-93.45549 -105.79999,-97.44484l0,-28.29044l-18.40002,0z" />
        </clipPath>
</svg>
<div class="ma0"></div>

杨帆 发表于 2025-8-7 22:47

漂亮，剪裁的一种新路径，谢谢马老师经典分享{:4_190:}

马黑黑 发表于 2025-8-7 23:39

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

{:4_191:}

马黑黑 发表于 2025-8-7 23:39

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

这个不是问题

马黑黑 发表于 2025-8-7 23:40

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

        .maa {


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

花飞飞 发表于 2025-8-8 09:01

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

小白跟着写下作业还是挺有成就感的{:4_173:}

花飞飞 发表于 2025-8-8 09:02

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

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

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

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

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

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

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

{:4_199:}

花飞飞 发表于 2025-8-8 20:14

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

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

花飞飞 发表于 2025-8-8 20:14

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


{:4_196:}乐滋滋美一个

红影 发表于 2025-8-8 20:32

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

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

红影 发表于 2025-8-8 20:34

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

嗯嗯，路径漂亮，背景或选用的图图漂亮，弄出来的定然很美{:4_187:}
页: [1] 2 3 4
查看完整版本: 使用SVG路径对对象进行剪裁