xml矢量图:svg的path元素

原创 2007年09月19日 14:18:00

一个典型的path元素:
  <path id="xxx" class="yy" d="M 228.231 191.802 c -1.5351,-0.2647 -1.9586,-0.4764 -2.5409,-1.0587 -0.3706,-1.1117 -0.7411 z" />

  在path元素中id、class与普通html意义一样。最重要的是描述路径的d属性,主要命令如下:
 
  M 路径的起点 如
     M x坐标,y坐标
    
  L,V,H 直线
     L x坐标,y坐标 (和M配合,组成一条完整直线;同类命令有 V 垂直线,和 H 水平线)
    
  A 弧线
     A 半径x,半径y 弧度 [large arc flag],[sweep flag] 终点x,终点y
       [large arc flag],[sweep flag]:
        0,0  Y轴逆时针旋转
        0,1  Y轴顺时针旋转
        1,0  X轴逆时针旋转
        1,1  X轴顺时针旋转

  C,S,Q,T 贝塞曲线
    三次贝塞曲线
     C 关键点1x,关键点1y 关键点2x,关键点2y 终点x,终点y
    二次贝塞曲线 
     S 关键点2x,关键点2y 终点x,终点y
     Q 关键点1x,关键点1y 终点x,终点y
    映射
     T 终点x,终点y
    
  Z 闭合点
    将线连到原点闭合路径
    

  1.指令大写是绝对坐标,使用相应小写就指相对坐标。
  2.如果转换到IE VML的path属性,c必须替换为v,z替换为x,坐标值全为整数。 

SVG(可缩放矢量图形)基本图形绘制方法与path路径命令

SVG(Scalable Vector Graphics)可缩放矢量图形 用于描述二维矢量图形的一种图形格式 它不是HTML5新增的 很早之前它就出现了 相比于canvas,它更适合作一些小图...
  • q1056843325
  • q1056843325
  • 2017年01月15日 15:12
  • 2018

Android UI:使用矢量图,抛弃PNG

一、矢量图简介最近在进行Android App“瘦身 ”的时候,了解到矢量图(VectorDrawable)相关概念。从Android5.0(API level 21)开始,有两个类支持矢量图:Vec...
  • p106786860
  • p106786860
  • 2016年12月23日 21:18
  • 6678

java处理word公式(wmf格式转换成svg)(svg格式转换成png)

wmf格式转换成svg把wmf格式转成svg格式,这样就能在浏览器中显示了需要第三方jar包:wmf2svg-0.9.6.jar//wmf格式的图片转换成svg格式 private voi...
  • gaoxiang24
  • gaoxiang24
  • 2018年02月10日 14:46
  • 5

Android 使用Vector XML文件创建矢量图片资源

转载请注明出处:本文出自【付小华的博客】 Vector:矢量的意思 我们知道,在安卓开发过程中,经常使用到png格式的图片资源,这种图片需要有不同分辨率来做屏幕适配,当图片数量很大时,被打包的图片...
  • klxh2009
  • klxh2009
  • 2016年04月11日 13:35
  • 6437

基于XML的可升级矢量图像(SVG)浅析

  • 2008年11月30日 15:01
  • 85KB
  • 下载

如何将SVG转换成VectorDrawable XML资源

首先给介绍一个网站,可谓是牛B闪闪:阿里巴巴矢量图标,有了它,麻麻再也不担心我没有图标了。如下图: 任意点击一个分组,可以见到如下各种详细的图标,我们可以根据自己的需求,调整不同的大小,然后下载图标。...
  • lupengfei1009
  • lupengfei1009
  • 2016年04月06日 22:11
  • 8715

Android开发中使用矢量图

本文我们将介绍一些关于Android矢量图的相关知识点。最新的项目中要求以矢量图替代传统的.png资源文件,所以特意学习了一下Android中的矢量图相关概念,不得不说矢量图还是一个比较好的适配方案。...
  • sg392361615
  • sg392361615
  • 2016年10月09日 10:22
  • 8145

svg矢量图绘制以及转换为Android可用的VectorDrawable资源

本文简单介绍了几款工具,目的能让新手快速的了解一下如何制作出自己需要的矢量图资源文件,在有需要做一张应用到Android应用/系统的矢量图时不至于措手不及。...
  • aaa111
  • aaa111
  • 2016年05月26日 00:20
  • 6239

HTML5 中的可缩放矢量图形(SVG)

http://www.ibm.com/developerworks/cn/web/wa-scalable/ HTML5 中的可缩放矢量图形(SVG) 基本概念和使用 ...
  • dusea
  • dusea
  • 2015年10月28日 21:07
  • 2607

SVG矢量图技术

一、SVG概述:SVG (Scalable Vector Graphics, 可伸缩矢量图形) 是W3C 推出的一种开放标准的文本式矢量图形描述语言,他是基于XML 的、专门为网络而设计的图像格式。S...
  • EricBaner
  • EricBaner
  • 2007年09月20日 00:55
  • 2806
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:xml矢量图:svg的path元素
举报原因:
原因补充:

(最多只允许输入30个字)