小程序
小游戏
企业微信
微信支付
扫描小程序码分享
- 需求的场景描述(希望解决的问题)
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"
; }
<
view
class
=
'iconfont icon-huanhuo'
style
=
'font-size: 25px;color: #CE1626'
></
view
>
<
view
class
=
'iconfont icon-huanhuo'
style
=
'font-size: 10px;color: #666'
></
view
>
好的,谢谢,我研究一下.