SVG学习

作者: heiheiwanne | 来源:发表于2017-05-02 17:16 被阅读24次

工具:Android SVG to VectorDrawable
Android SVG to VectorDrawable2
SVG-Editor

SVG 开源库
https://xituqu.com/335.html#comments
http://www.iconfont.cn/collections?spm=a313x.7781069.0.0.fEW4eG&personal=1
http://www.iconsvg.com/

Android 中的svg 是以Vector Drawable 存在

Vector语法简介

Android以一种简化的方式对SVG进行了兼容,这种方式就是通过使用它的Path标签,通过Path标签,几乎可以实现SVG中的其它所有标签,虽然可能会复杂一点,但这些东西都是可以通过工具来完成的,所以,不用担心写起来会很复杂。

Path指令解析如下所示:

支持的指令:

M = moveto(M X,Y) :将画笔移动到指定的坐标位置
L = lineto(L X,Y) :画直线到指定的坐标位置
H = horizontal lineto(H X):画水平线到指定的X坐标位置
V = vertical lineto(V Y):画垂直线到指定的Y坐标位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY):三次贝赛曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY)
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY):二次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY):映射
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧线
Z = closepath():关闭路径

使用原则:

坐标轴为以(0,0)为中心,X轴水平向右,Y轴水平向下
所有指令大小写均可。大写绝对定位,参照全局坐标系;小写相对定位,参照父容器坐标系
指令和数据间的空格可以省略
同一指令出现多次可以只用一个
注意,'M'处理时,只是移动了画笔, 没有画任何东西。 它也可以在后面给出上同时绘制不连续线。

android:pathData讲解
Android vector 标签 pathData 详解

详细介绍请看这篇文章,Android Vector曲折的兼容之路 ,本文不做介绍了,本文主要介绍将SVG应用替换ImageLoader。后续补。。。

参考:http://mp.weixin.qq.com/s?__biz=MzA5MzI3NjE2MA==&mid=2650236282&idx=1&sn=657273a149d44a7cece449df369549b2&scene=0#wechat_redirect

相关文章

  • SVG学习笔记

    SVG学习笔记 简介 SVG使用XML来描述二维图形和绘图程序的语言。 SVG形状 SVG在HTML页面 SVG ...

  • NFH.007 - SVG矢量图与two.js

    12.17学习经验分享# Bruce_Zhu于2016.12.17 SVG## ——SVG特点: SVG 指可伸缩...

  • SVG 学习笔记

    SVG 学习笔记 SVG是什么 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) S...

  • SVG 简介

    基础 学习SVG之前需要掌握: HTML 与 XMLSVG参考手册:SVG元素列表 SVG 指可伸缩矢量图形 (S...

  • 3-5 形状篇 圆饼图

    知识储备 1.svg 去W3School学习学习 http://www.w3school.com.cn/svg/s...

  • HTML5学习--SVG全攻略(进阶篇)

    ****此篇为svg的进阶介绍篇,了解更多关于svg的介绍请看 HTML5学习--SVG全攻略(基础篇)*** *...

  • CSS之SVG

    一、学习链接 阮一峰-SVG 教程[https://wangdoc.com/webapi/svg.html] 菜鸟...

  • SVG学习

    工具:Android SVG to VectorDrawableAndroid SVG to VectorDraw...

  • SVG学习

    svg MDN较为详细 地址:https://developer.mozilla.org/zh-CN/docs/W...

  • 学习SVG

    在线练习SVG 编辑器 基本语法 CSDN

网友评论

      本文标题:SVG学习

      本文链接:https://www.haomeiwen.com/subject/vvectxtx.html