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矢量图

一:什么是SVG以及的特点 (1)SVG指可伸缩矢量图形(Scalable Vector Graphics) (2)SVG 用来定义用于网络的基于矢量的图形 (3)SVG 使用 XML 格式定义...

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

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

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

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

关于qt如何显示svg矢量图片中的中文

今天终于拿到svg格式的矢量图,之前使用开发板最多只能输出1024*768分辨率的图像,而显示器是1920*1080的分辨率,显示起来非常不清楚,于是想到用矢量图。 可是矢量图到手之后,简直就是噩梦...

Android Vector Drawable | SVG 矢量图

Android Vector Drawable | SVG 矢量图What is SVGSVG(全称:可缩放矢量图形 Scalable Vector Graphics),是用于描述矢量图形的一种图形格...

inkscape将png图片转换为svg格式的矢量图

1.导入png图片,也可以直接将图片拉入到窗口 这个是打开操作 这个是直接拖入到新建文档的 这样不会打开新的窗口来展示图片 二者不同之处 ...

Svg矢量图收藏

Svg矢量图收藏最近做chart图表,需要五角星图案,只能使用Svg进行绘制。//本demo中图例搜集于echart官网文档和demo,本站demo,以及网上各种图形 var iconArray=[ ...

html矢量图 SVG VML 介绍

观看者:想了解html矢量图知识的同学 目标:了解html矢量图知识,svg和vml 兼容方案。 实现方式:代码及相关文字解释。 最近web项目需要一些流程图的支持,于是研究了一下这部分东西,觉得...

Android 关于SVG矢量图支持

原文出处:微信,脉脉不得语的安卓开发技术周报 47期推荐   资源矢量化 “清晰”和“体积”的矛盾与麻烦 面对andr...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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