html 图片转svg 并使用svg路径来裁剪html元素

1.png转svg 工具地址:

Vectorizer -- 免费图像矢量化

打开svg图片,复制其中的path中的d标签的路径

查看生成的svg路径是否正确

在线SVG路径预览工具 - UU在线工具

2.在html中使用svg路径

复制代码
<svg xmlns="http://www.w3.org/2000/svg" width="318px" height="160px" viewBox="0 0 20 20">
		  <clipPath id="indexBj" >
		    <path fill-rule="evenodd" d="M 14.5,-0.5 C 111.167,-0.5 207.833,-0.5 304.5,-0.5C 307.93,1.93541 309.596,5.26875 309.5,9.5C 313.731,9.40367 317.065,11.0703 319.5,14.5C 319.5,58.5 319.5,102.5 319.5,146.5C 317.065,149.93 313.731,151.596 309.5,151.5C 309.596,155.731 307.93,159.065 304.5,161.5C 207.833,161.5 111.167,161.5 14.5,161.5C 11.0703,159.065 9.40367,155.731 9.5,151.5C 5.26875,151.596 1.93541,149.93 -0.5,146.5C -0.5,102.5 -0.5,58.5 -0.5,14.5C 1.93541,11.0703 5.26875,9.40367 9.5,9.5C 9.40367,5.26875 11.0703,1.93541 14.5,-0.5 Z"/>
		  </clipPath>
		</svg>

找到裁剪的元素,应用裁剪

复制代码
clip-path: url(#indexBj);

如果想svg不占用页面空间

复制代码
<svg>
				<defs>
					<clipPath id="familyActivityItemCropping">
						<path fill-rule="evenodd"
							d="M 14.5,-0.5 C 111.167,-0.5 207.833,-0.5 304.5,-0.5C 307.93,1.93541 309.596,5.26875 309.5,9.5C 313.731,9.40367 317.065,11.0703 319.5,14.5C 319.5,58.5 319.5,102.5 319.5,146.5C 317.065,149.93 313.731,151.596 309.5,151.5C 309.596,155.731 307.93,159.065 304.5,161.5C 207.833,161.5 111.167,161.5 14.5,161.5C 11.0703,159.065 9.40367,155.731 9.5,151.5C 5.26875,151.596 1.93541,149.93 -0.5,146.5C -0.5,102.5 -0.5,58.5 -0.5,14.5C 1.93541,11.0703 5.26875,9.40367 9.5,9.5C 9.40367,5.26875 11.0703,1.93541 14.5,-0.5 Z" />
					</clipPath>
				</defs>
			</svg>

或者使用css的 mask-image 属性

使用图像作为遮罩: 你可以通过使用具有特定颜色通道的图像作为遮罩来控制显示的颜色。例如,如果你有一个黑白图像,其中黑色部分表示要隐藏的区域,白色部分表示要显示的区域,你可以这样使用:

复制代码
.element {
  mask-image: url('path/to/mask.png');
}
相关推荐
264玫瑰资源库13 分钟前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端24 分钟前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED30 分钟前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪1 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程1 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常1 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
烛阴1 小时前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中1 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木2 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师2 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt