svg

用XML定义的矢量图

实例

<?xml              // xml声明
  version="1.0"    // 版本 
  standalone="no"  // SVG 文件是否是"独立的"，或含有对外部文件的引用 
?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">   <!-- SVG 引用了这个外部的 SVG DTD -->

<svg
width="100%" 
height="100%" 
version="1.1"  //使用的 SVG 版本
xmlns="http://www.w3.org/2000/svg" // 定义 SVG 命名空间
>

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

形状元素

• 矩形 <rect>
• 圆形 <circle>
• 椭圆 <ellipse>
• 线 <line>
• 折线 <polyline>
• 多边形 <polygon>
• 路径 <path>

属性

基本属性

• fill-opacity 填充颜色透明度
• stroke-opacity 轮廓颜色透明度
• opacity 整个元素的透明度

rect

• x 属性定义矩形的左侧位置
• y 属性定义矩形的顶端位置
• rx 和 ry 矩形圆角

circle

• cx 圆点x坐标，默认0
• cy 圆点y坐标，默认0
• r 半径

ellipse

• cx 中心x坐标，默认0
• cy 中心y坐标，默认0
• rx x半径
• ry y半径

line

• x1 x 轴定义线条的开始
• y1 y 轴定义线条的开始
• x2 x 轴定义线条的结束
• y2 y 轴定义线条的结束

polyline

• points x1,y1 x2,y2...

polygon

• points 每个点的xy坐标。x1,y1 x2,y2...

path

• d
  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath

  大写表示绝对定位，小写表示相对定位。