小程序中如何修改 svg 图片的颜色 |
您所在的位置:网站首页 › 微信小程序的颜色 › 小程序中如何修改 svg 图片的颜色 |
已知小程序 支持 svg 图片渲染;但是在开发场景中,如果我们需要修改 svg 图片原有的颜色,往往需要去修改 svg 文件本身。这样修改既不优雅,也不利于 svg 图片的复用。有没有一种方法可以更加优雅地去修改 svg 图片的颜色呢? 一、可行性探讨
svg 源码修改 既然要在原 svg 文件的基础上修改颜色,让我们先看一下 svg 源码是如何的,下面是一个三角形的 svg 源码: 我们可以发现在源码中, 中的 fill 属性便是我们需要修改的颜色。如果我们能读取源码,修改对应属性,便能修改 svg 图片的颜色了;但开发过程中,我们的 svg 源文件往往是网络资源,并不能直接修改,有没有一种方法可以将 svg 源码直接在小程序进行渲染呢?
svg 源码渲染 小程序原生虽然不支持 渲染的,但我们可以通过 background-image 样式属性对 URL 资源进行加载;我们只需要将修改后 svg 源码进行 URL 编码,即可将我们想要的效果渲染出来。 方案总结 1、读取 svg 文件 2、匹配 Hex 字段并进行修改 3、将修改后的 svg 数据进行 URL 编码 4、将 URL 数据通过 background-image 样式属性进行渲染 二、技术实现 调用方式:组件 为方便调用,将其封装自定义组件,组件命名 svg,承接 svg 渲染能力,后续可在此基础上丰富 svg 的能力。
入参:src ,colors 通过 src 参数传递 svg 图片链接; svg 图片可能包括多个元素,这个时候就需要我们对不同的元素定义各自的颜色。 默认属性 由于 svg 自身不存在尺寸,我们可以将其宽高同时设置成 100%,这样就可以通过承载其的父元素决定 的渲染尺寸。 三、 组件代码
代码片段,点击进入 四、更多功能扩展 自定义 svg 渲染 前面我们修改 svg 图片是通过修改其 fill 属性实现的;更进一步我们完全可以不依赖外部资源,自定义 svg 节点,按照 svg 的规范进行图片的绘制,感兴趣可以尝试尝试。 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |