本博文为子墨原创，转载请注明出处！
http://blog.csdn.net/zimo2013/article/details/49824253

1.效果图

2.SVG-Path路径

下面的命令可用于路径数据：
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath
注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

请把下面的代码拷贝到记事本，然后把文件保存为 "path1.svg"。把此文件放入您的 web 目录：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M250 150 L150 350 L350 350 Z" />
</svg>

上面的例子定义了一条路径，它开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径。

3.图片生成SVG格式

这里推荐使用GIMP工具生成，具体步骤如下：

根据以上找到Path路径，将其保存起来

再到路径对话框中，将path导出

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN""http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg xmlns="http://www.w3.org/2000/svg"width="1.77778in" height="1.77778in"viewBox="0 0 128 128"><path id="选区"fill="none" stroke="black" stroke-width="1"d="M 108.54,26.04C 131.59,52.94 125.04,97.93 93.00,114.7479.15,122.00 75.25,122.17 60.00,122.0022.32,121.56 -2.52,80.38 8.75,46.0016.01,23.85 33.60,10.58 56.00,6.4475.35,3.96 95.68,11.04 108.54,26.04 ZM 56.97,45.15C 52.64,43.32 36.54,44.00 31.00,44.0031.00,44.00 31.00,76.00 31.00,76.0031.02,78.13 30.74,81.51 32.60,82.9834.49,84.47 42.35,84.00 45.00,84.0049.96,83.99 56.82,83.94 60.73,80.4366.36,75.36 66.06,66.13 56.97,63.0056.97,63.00 56.97,61.00 56.97,61.0065.30,56.20 63.38,47.91 56.97,45.15 ZM 75.00,47.00C 75.00,47.00 75.00,49.00 75.00,49.0075.00,49.00 90.00,49.00 90.00,49.0090.00,49.00 90.00,47.00 90.00,47.0090.00,47.00 75.00,47.00 75.00,47.00 ZM 53.69,50.02C 56.68,52.02 56.68,57.83 53.69,59.8351.13,61.53 42.36,61.00 39.00,61.0039.00,61.00 39.00,49.00 39.00,49.0042.16,49.00 51.36,48.47 53.69,50.02 ZM 90.00,71.00C 101.61,70.78 95.70,60.78 91.70,57.8481.22,50.14 65.06,59.66 68.95,74.0072.11,85.62 91.42,89.31 96.00,75.9589.20,76.54 82.26,84.08 76.93,75.9576.03,74.51 75.51,72.57 75.00,71.0075.00,71.00 90.00,71.00 90.00,71.00 ZM 91.00,67.00C 91.00,67.00 75.00,67.00 75.00,67.0077.80,56.34 89.44,55.99 91.00,67.00 ZM 48.00,65.14C 49.46,65.02 51.56,65.02 52.95,65.1457.94,66.90 59.11,73.01 55.57,76.5752.93,79.23 48.51,79.13 45.00,78.9842.86,78.89 40.68,78.89 39.60,76.6938.72,74.89 39.00,67.39 39.00,65.1439.00,65.14 48.00,65.14 48.00,65.14 Z" />
</svg>

如果找不到路径对话框，可根据下图找到

4.实现方式

这里使用AndroidFillableLoaders框架加载svg，更多可以查看作者文章http://jorgecastillo.xyz/2015/08/16/android-fillable-loaders/

<com.github.jorgecastillo.FillableLoaderandroid:id="@+id/fillableLoader"android:layout_width="200dp"android:layout_height="100dp"app:fl_originalWidth="@integer/original_svg_width"app:fl_originalHeight="@integer/original_svg_height"app:fl_strokeColor="@color/stroke_color"app:fl_fillColor="@color/fill_color"app:fl_strokeWidth="@dimen/stroke_width"app:fl_strokeDrawingDuration="@integer/stroke_drawing_duration"app:fl_fillDuration="@integer/fill_duration"app:fl_clippingTransform="waves"/>
@Override
protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);String svg = "M 108.54,26.04\n" +"C 131.59,52.94 125.04,97.93 93.00,114.74\n" +" 79.15,122.00 75.25,122.17 60.00,122.00\n" +" 22.32,121.56 -2.52,80.38 8.75,46.00\n" +" 16.01,23.85 33.60,10.58 56.00,6.44\n" +" 75.35,3.96 95.68,11.04 108.54,26.04 Z\n" +"M 56.97,45.15\n" +"C 52.64,43.32 36.54,44.00 31.00,44.00\n" +" 31.00,44.00 31.00,76.00 31.00,76.00\n" +" 31.02,78.13 30.74,81.51 32.60,82.98\n" +" 34.49,84.47 42.35,84.00 45.00,84.00\n" +" 49.96,83.99 56.82,83.94 60.73,80.43\n" +" 66.36,75.36 66.06,66.13 56.97,63.00\n" +" 56.97,63.00 56.97,61.00 56.97,61.00\n" +" 65.30,56.20 63.38,47.91 56.97,45.15 Z\n" +"M 75.00,47.00\n" +"C 75.00,47.00 75.00,49.00 75.00,49.00\n" +" 75.00,49.00 90.00,49.00 90.00,49.00\n" +" 90.00,49.00 90.00,47.00 90.00,47.00\n" +" 90.00,47.00 75.00,47.00 75.00,47.00 Z\n" +"M 53.69,50.02\n" +"C 56.68,52.02 56.68,57.83 53.69,59.83\n" +" 51.13,61.53 42.36,61.00 39.00,61.00\n" +" 39.00,61.00 39.00,49.00 39.00,49.00\n" +" 42.16,49.00 51.36,48.47 53.69,50.02 Z\n" +"M 90.00,71.00\n" +"C 101.61,70.78 95.70,60.78 91.70,57.84\n" +" 81.22,50.14 65.06,59.66 68.95,74.00\n" +" 72.11,85.62 91.42,89.31 96.00,75.95\n" +" 89.20,76.54 82.26,84.08 76.93,75.95\n" +" 76.03,74.51 75.51,72.57 75.00,71.00\n" +" 75.00,71.00 90.00,71.00 90.00,71.00 Z\n" +"M 91.00,67.00\n" +"C 91.00,67.00 75.00,67.00 75.00,67.00\n" +" 77.80,56.34 89.44,55.99 91.00,67.00 Z\n" +"M 48.00,65.14\n" +"C 49.46,65.02 51.56,65.02 52.95,65.14\n" +" 57.94,66.90 59.11,73.01 55.57,76.57\n" +" 52.93,79.23 48.51,79.13 45.00,78.98\n" +" 42.86,78.89 40.68,78.89 39.60,76.69\n" +" 38.72,74.89 39.00,67.39 39.00,65.14\n" +" 39.00,65.14 48.00,65.14 48.00,65.14 Z";fillableLoader = (FillableLoader) findViewById(R.id.fillableLoader);//将生成svg作为字符串传参进来fillableLoader.setSvgPath(svg);
}
findViewById(R.id.btn).setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {//开启fillableLoader.start();}
});

Android_SVG概述及生成使用SVG详解相关推荐

  1. SVG 详解——自定义可点击的中国地图

    SVG 详解--自定义可点击的中国地图 SVG 定义 SVG 是一种图像文件格式,类似于 JPG.PNG.只不过 JPG 和 PNG 这种文件需要图像引擎加载,而 SVG 则是由画布来加载的. 它的英 ...

  2. 生成jni的android.mk,Android Studio 3.5版本JNI生成SO文件详解

    学习在于记录,把自己不懂得容易忘记得记录下,才是最好得选择. 废话不多说,想要在Android开发中嵌入c/c++代码,直接开始如下步骤 1.创建需要调用的Java类 在你某个指定的包下创建如下类pa ...

  3. 用html js制作迷宫,JavaScript生成随机迷宫详解

    本篇教程介绍了JavaScript生成随机迷宫详解,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入. < #先看生成随机迷宫的代码吧↓ 1 2 3 生成随机迷宫v ...

  4. 生成模型——自回归模型详解与PixelCNN构建

    生成模型--自回归模型详解与PixelCNN构建 自回归模型(Autoregressive models) 简介 PixelRNN 使用TensorFlow 2构建PixelCNN模型 输入和标签 掩 ...

  5. Keras深度学习实战（22）——生成对抗网络详解与实现

    Keras深度学习实战(22)--生成对抗网络详解与实现 0. 前言 1. 生成对抗网络原理 2. 模型分析 3. 利用生成对抗网络生成手写数字图像 小结 系列链接 0. 前言 生成对抗网络 (Gen ...

  6. 用Wex5平台打包生成App图文详解（Android）

    用Wex5平台打包生成App图文详解(Android) 第一步:到起步官网下载并解压好Wex5开发工具:http://www.wex5.com/downloads/ 第二步:在解压的目录下打开开发工具 ...

  7. SVG 详解（四）其他常用标签

    文章案例 => 传送门 clipPath-裁剪 能限制哪些地方可见,哪些地方不可见.标记指定的区域之外的所有内容都不会被显示(图像不会被绘制出来).剪切路径是用clipPath元素定义的,属性c ...

  8. crypto-js 前端DES加密/解密、生成秘钥 详解

    DES概述 DES全称为Data Encryption Standard,即数据加密标准,是一种使用密钥加密的块算法,1977年被美国联邦政府的国家标准局确定为联邦资料处理标准(FIPS),并授权在非 ...

  9. geojson在线生成工具_logofree详解：LOGO设计在线生成

    未了解行情的人可能会问LOGO设计在线生成是什么?了解的人还会问LOGO设计在线生成好不好?那今天logofree就从多方面去详解LOGO设计在线生成,让你对LOGO设计在线生成了解得明明白白. ​ ...

最新文章

  1. 综述系列 | 多标签学习的新趋势
  2. Windows与VMware下的Linux文件共享方式总结
  3. 【特惠】非饱和（不内卷），高颜值，有三这本深度学习书正在半价！
  4. 互联网员工桌子上的药
  5. HTML怎么让正方形转动,第十讲：html5中canvas实现正方体的动态旋转
  6. 2011计算机等级考试二级c语言公共基础教程.doc,2011年全国计算机等级考试二级c语言公共基础知识复习100题及答案.doc...
  7. java 数据类型 面试题_Java数据类型面试题目
  8. 伍德里奇计量经济学导论之计算机操作题的R语言实现（虚拟变量）
  9. Python 爬虫 ~ Prison Oriented Programming。
  10. html文档放到phpstudy,phpstudy使用详解
  11. Python数据分析练习（一）（餐厅订单分析meal_order_detail）
  12. jQuery API .append()
  13. SVG代码例子及含义
  14. 生产实践中的经典算法(四)-BitMap
  15. python使用aip库识别图片中文字
  16. 基于51单片机的倒计时温度检测报警器
  17. 乐见 SOA 和 EA 融合之势
  18. 腾讯云「邮件证书」重磅发布！从此告别邮件安全漏洞
  19. 一文读懂两台计算机之间是如何通信的
  20. centos7安装boot分区_图文详解centos Linux系统安装教程

热门文章

  1. win10打开此计算机慢,Win10系统打开此电脑很慢总显示在加载的解决方法
  2. 恋爱、解密、沙盒，你喜欢的元素全都有，超有趣的手机游戏推荐！
  3. SourceTree冲突解决
  4. LOGFONT结构体的说明
  5. vue移动端音乐---使用QQ音乐数据
  6. 小米高管鸿蒙测试,小米在测试华为鸿蒙系统？高管侧面给出回应，网友的结论很真实...
  7. 定制XP系统，制作ghost xp安装盘
  8. VS Code＜!DOCTYPE html＞报错：应为表达式 ts(1109)
  9. 弘玑Cyclone RPA助力东兴证券建立智能财务中心，以自动化为业务提质增效
  10. 省选游记暨后期基础规划