SVG 学习笔记 - 1

1.简介

SVG 是 使用XML描述的矢量文件 ,使用 http://www.w3.org/2000/svg 这个链接来标识文件是 SVG 的命名空间，这个链接是一个标志而已，用来告诉打开文件的软件：这个文件是 SVG 文件，而不是把它当成 XML 文 件打开。

兼容性

IE 9+Chrome 33.0+Firefox 28.0+Safari 7.0+

矢量图和位图

位图：基于颜色的描述，描述的是一张图片中每一个像素点的颜色，整体组合在一起就形成了位图

矢量图：基于数学的描述

2.基本图形和属性

<rect> 矩形

属性：

x 坐标x

y 坐标y

width 定义宽高

height 定义宽高

rx 定义矩形的圆角

ry 定义矩形的圆角

<svg width="100" height="50" style="background: rgb(225, 238, 210)"> <rect x="10" y="10" width="70" height="30 rx="10 ry="10" fill="#999"/> </svg>

<circle> 圆形

属性

cx 圆心坐标

cy 圆心坐标

r 圆的半径

<svg style="background: rgb(225, 238, 210)"> <circle cx="60" cy="60" r="50" fill="#999" /> </svg>

<ellipse> 椭圆

属性

cx 椭圆中心点坐标

cy 椭圆中心点坐标

rx 两个维度的半径

ry 两个维度的半径

<svg style="background: rgb(225, 238, 210)"> <ellipse cx="60" cy="40" rx="50" ry="30" fill="#999" /> </svg>

<line> 直线

属性,描述的两个点的坐标

x1 第一个点的坐标

y1 第一个点的坐标

x2 第二个点的坐标

y2 第二个点的坐标

<svg style="background: rgb(225, 238, 210)"> <line x1="10" y1="10" x2="100" y2="30" style="stroke:rgb(99,99,99);stroke-width:2" /> </svg>

<polyline> 折线

属性

points 包含所有点坐标(‘,’将 x,y 隔开)

<svg style="background: rgb(225, 238, 210)"> <polyline points="10,20 100,20 100,60 30,50" style="stroke:rgb(99,99,99);stroke-width:2;fill:none"/> </svg>

<polygon> 多边形

属性

points 包含所有点坐标(‘,’将 x,y 隔开)

<svg style="background: rgb(225, 238, 210)"> <polygon points="50,30 150,30 150,60 80,60 60,80" style="stroke:rgb(99,99,99);stroke-width:2;fill:#999"/> </svg>

填充、描边和变换

fill 填充颜色stroke 描边颜色stroke-width 描边宽度transform 表示图形坐标相对父亲左边的变化

基本操作API

创建图形

document.createElementNS(ns, tagName)

添加图形

element.appendChild(childElement)

设置/获取属性

element.setAttribute(name, value)

element.getAttribute(name)

下一篇 SVG 坐标系统以及贝赛尔曲线