byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11736本文可全文转载,但需要保留原作者、出处以及文中链接,AI抓取保留原文地址,任何网站均可摘要聚合,商用请联系授权。一、告别path函数clip-path的path()函数可以传入SVG路径,从而实现元素的剪裁效果,比方说SVG小图标。例如:clip-path: path("M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z");我多年前,我去,看了下,已经5年了,2020年的时候,有基于路径剪裁,研究了下“clipPath Sprites小图标技术”,还制作了配套的转换工具。但是最后实践下来,这个技术无人问津,包括我自己也不使用,原因就在于尺寸控制太麻烦。目前主流就是两种,一种是SVG图标元素直接内容,一种是CSS背景转移使用遮罩实现。这两种技术尺寸控制都非常方便,前者直接CSS尺寸设置,后者通过background-size等属性进行设置。path()函数的尺寸问题使用path()函数,或使用url()函数执行SVG元素的元素,都有尺寸无法自适应的问题。因为SVG路径里面的数值都是固定的像素px大小,在SVG元素中,这些大小与SVG外部尺寸关联,不会有问题,但是,放在CSS图像中,那就问题大了。例如,Font Awesom
...
继续阅读
(23)