SVG学习-1

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 坐标系统以及贝赛尔曲线