SVG矢量图标修改颜色攻略

AxureRP8.0教程 小楼一夜听春语 28281℃ 0评论

Axure最新版已经添加SVG编辑功能,能够进行颜色修改。【点此查看】

昨天发的矢量图标元件库,颜色是黑的,像木耳一样!

而且,在Axure里改不了颜色!

有同学说,我要白色;

有同学说,我要黄色;(种子请发我邮箱)

有同学说,我要绿色;(看好自己的媳妇)

还有同学说,我要肉色。(要脸吗?)

但是,我是个负责任的男人。

你们有需求,我都是尽量满足的。

所以呢!写下了下面这一段攻略。

1、从元件库拖入要使用的图标。

01
2、按F5键在浏览器中预览,在浏览器页面中的图标上点击鼠标右键,将其另存到本地。

02
3、在下载到本地的SVG文件上点击鼠标右键,打开方式选择记事本。如果没有这种打开方式,可以打开任意一个文本文档文件将SVG文件拖入,进行编辑。

03
4、修改文本文档中的图标颜色代码,然后按Ctrl+S键进行保存。

04
5、颜色代码可以在Axure中拖入一个矩形,选择满意的颜色,然后将代码复制,替换文本文档中的颜色代码。

05
6、使用时将改好的SVG图标拖入到Axure画布中,或者在画布中拖入图片元件,双击导入SVG图标。

06

看起来过程有些复杂,其实,按步骤弄一次,基本就会了。而且,一般来说我们用的图标并不多,所以这种方式还是很方便的!


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » SVG矢量图标修改颜色攻略

喜欢 (65)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(23)个小伙伴在吐槽
  1. 1、这样操作不成功,步骤二,图片另存为的时候,我输入的文件名是:XX.svg,保存类型:所有文件。然后用记事本打开,显示的是中文的乱码:“塒NG IHDR ' 2 吒? sRGB ? gAMA 睆黙” 2、Axure RP 8不需要这样操作吧:在ICONS中选择一个图标,例如,Automobile,然后在右侧的检视形状/样式/填充中直接选择颜色即可,选完后,Automobile的颜色就变了。
    jobim2016-05-08 00:16 回复
    • 小楼一夜听春语
      1、另存文件为xx.svg,右键另存图片,确定。不要有多余操作,也不需要你输入文件名,选择保存类型;将svg文件用文本文档打开。截图里已经很清楚了。 2、8.0的icon是形状不是图片,能直接改颜色;svg是图片不能直接改颜色。
      小楼一夜听春语2016-05-08 11:35 回复
  2. 元件库的下载地址是什么?
    sjfzmcb2016-06-11 18:09 回复
  3. 太麻烦了,直接双击更改文字颜色就可以了...
    泡泡2016-06-27 17:31 回复
    • 小楼一夜听春语
      svg元件库的图标都是矢量图片,不像图标字体可以直接改颜色。
      小楼一夜听春语2016-06-27 22:41 回复
      • 直接改填充色就好了
        十万个为什么2016-07-07 18:57 回复
        • 小楼一夜听春语
          你先去试试能不能改,据我所知填充颜色的按钮是灰的。注意这不是字体库,这是SVG图片元件库。
          小楼一夜听春语2016-07-08 17:12 回复
  4. 为什么我打开记事本是一对乱码 😥
    小初2016-07-13 18:25 回复
  5. 右键图片另存为SVG格式,通过文本文档打开确实是乱码,不知哪里出了问题。还有一个SVG也确实没办法直接更改颜色。。说能改的不知何方神圣,还请收了神通~~莫误人子弟
    水瓶座的贰师兄2016-07-18 11:49 回复
  6. 那个。。。首先,我先向小楼道歉~~ 我知道怎么不会乱码了,SVG拖到Axure界面的时候不要去动他,直接F5就行~~我前面是先把它拉大,然后才F5,因为图片实在太小。这也导致了为什么点击另存为会不是SVG且文档打开是乱码的问题~~~感谢小楼
    水瓶座的贰师兄2016-07-18 11:57 回复
  7. 8.0的元件库里就有icon的元件库,直接更换对应icon的属性为想要的颜色就行了。没找到方便的svg库,现有的元件库保存后,只能为png后缀的,用记事本打开是乱码。就算强行保存成svg后缀的,记事本打开也是乱码。
    古城之茄2016-07-18 15:35 回复
  8. 我只想说这样太复杂了,给楼主介绍一个简单的办法。那就是用illustrator,ctrl+C。到axure中,ctrl+V,即可。也是矢量的,颜色可以再illustrator里面就设置好,总之方便多了。
    wei2016-08-08 19:14 回复
  9. 为什么我按照你的操作步骤不成功呢?把元件拖入后直接F5,右键“图片另存为”,结果保存类型选项里只有*.png *.bmp,没有SVG格式,这是怎么回事呢?
    雪岭寒冰2016-08-09 02:39 回复
  10. 我要渐变色
    StayReal_Po2016-11-13 14:18 回复
  11. 怒赞,片子可以与您共享 有一个问题想请教,如何自定义一个库中多个定义分类图标,ths!
    sean2017-02-17 09:52 回复
  12. 发现好多都没有自己试的,苦了小楼老湿了~
    BigFine2017-03-08 14:44 回复
  13. 按F5预览时,用Google浏览器打开就可以存为svg文件了,IE打开没有svg格式。
    Bing2017-03-21 18:07 回复
  14. 现在的新版本已经有SVG直接转为形状了。选择图标,右键菜单就有这个选项。
    fofa2017-05-05 09:37 回复
    • 小楼一夜听春语
      http://www.iaxure.com/5381.html
      小楼一夜听春语2017-05-05 17:57 回复
  15. 直接重下一个不就好了,很多图标网站下载的时候就可以直接改颜色,为什么要这么麻烦
    狐狐狐狸2017-05-06 09:39 回复
  16. 会有边线残留,改成浅色填充的话就很明显
    muun2017-05-18 09:40 回复
    • 小楼一夜听春语
      注意文章加粗黑体的第一句话
      小楼一夜听春语2017-05-19 14:20 回复
  17. 一次成功,受教了
    蓝色刀锋2017-10-31 11:43 回复