SVG路径遮罩实现图片颜色任意替换

本文作者html5tricks,转载请注明出处

我们知道Svg可以构造任意的路径,绘制出任意的平面图形甚至是类3D的图形画面。今天我们要介绍的就是一款利用SVG路径遮罩实现图片颜色的任意替换功能。这里我们以沙发图片为例,我们可以任意更改沙发的颜色及其背景颜色。原理是利用SVG绘制沙发的路径结构,然后用选择的颜色填充路径即可。如果你要换一款沙发或者别的产品,那么这个路径就需要重新计算。这款应用比较适合一些电子商务平台的商品展示,我们不需要为每一款颜色都提供图片。当然如果商品图片有不同的色块,那也不太适合这个工具。

svg-color-sofa

在线演示源码下载

扫描下方二维码关注公众号

发送消息 jymm 获取 解压密码

分享HTML5/CSS3技术;jQuery插件;Vue、React等前端开发组件

热门推荐