小程序
小游戏
企业微信
微信支付
扫描小程序码分享
- 需求的场景描述（希望解决的问题）
svg图标比png图标的优势在于:
1.同一图标可指定不同尺寸的样式复用,不失真,移动端显示效果好.
2.压缩效果好,占空间小,这样程序整体加载快,用户体验好.
现image组件中可以显示svg图标,但不足的是,同一图标无法在不同使用场景下指定不同颜色.
- 希望提供的能力
望早日支持svg的fill样式定义.
3 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
你好，使用普通view并设置background-image是支持svg的
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
你说的是用"data:image/"方式?
不好意思 ，看错以为是要支持svg格式，颜色混合目前应该还没有支持，后面的版本会逐渐完善
上面的意思是用文字图标，文字图标可以指定size 改变颜色并且不失真，png都有点失真了
把svg上传到阿里的iconfont，用style的color就可以改颜色
我的意思是要在小程序中一个svg文件,不同场景不同颜色复用.而不是存放多个只是颜色不同的svg文件.
我说的就是这个意思
https://www.cnblogs.com/fashandian/p/6880892.html
原理是把svg改成css，大小，颜色都可以用font-size，color改
@font-face {
font-family
:
'iconfont'
;
/* project id 365631 */
src
url
(
'//at.alicdn.com/t/font_365631_amyihc4j75b.eot'
);
'//at.alicdn.com/t/font_365631_amyihc4j75b.eot?#iefix'
)
format
'embedded-opentype'
),
'//at.alicdn.com/t/font_365631_amyihc4j75b.woff'
'woff'
'//at.alicdn.com/t/font_365631_amyihc4j75b.ttf'
'truetype'
'//at.alicdn.com/t/font_365631_amyihc4j75b.svg#iconfont'
'svg'
}
.iconfont {
"iconfont"
!important
font-size
16px
font-style
normal
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
.icon-huanhuo:before{
content
"\e67a"
; }
<
view
class
=
'iconfont icon-huanhuo'
style
'font-size: 25px;color: #CE1626'
></
>
'font-size: 10px;color: #666'
好的,谢谢,我研究一下.
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
你好，使用普通view并设置background-image是支持svg的
你说的是用"data:image/"方式?
不好意思 ，看错以为是要支持svg格式，颜色混合目前应该还没有支持，后面的版本会逐渐完善
上面的意思是用文字图标，文字图标可以指定size 改变颜色并且不失真，png都有点失真了
把svg上传到阿里的iconfont，用style的color就可以改颜色
我的意思是要在小程序中一个svg文件,不同场景不同颜色复用.而不是存放多个只是颜色不同的svg文件.
我说的就是这个意思
https://www.cnblogs.com/fashandian/p/6880892.html
原理是把svg改成css，大小，颜色都可以用font-size，color改
@font-face {font-family:'iconfont';/* project id 365631 */src:url('//at.alicdn.com/t/font_365631_amyihc4j75b.eot');src:url('//at.alicdn.com/t/font_365631_amyihc4j75b.eot?#iefix')format('embedded-opentype'),url('//at.alicdn.com/t/font_365631_amyihc4j75b.woff')format('woff'),url('//at.alicdn.com/t/font_365631_amyihc4j75b.ttf')format('truetype'),url('//at.alicdn.com/t/font_365631_amyihc4j75b.svg#iconfont')format('svg');}.iconfont {font-family:"iconfont"!important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.icon-huanhuo:before{content:"\e67a"; }<viewclass='iconfont icon-huanhuo'style='font-size: 25px;color: #CE1626'></view><viewclass='iconfont icon-huanhuo'style='font-size: 10px;color: #666'></view>好的,谢谢,我研究一下.