SVG入门

这部分包括三个内容:

1. 基本图形

2. 基本属性

3. 基础操作API

基本图形

名称

描述

参数

图示

rect 

定义一个矩形

x="矩形的左上角的x轴"

y="矩形的左上角的y轴"

rx="x轴的半径(round元素)"

ry="y轴的半径(round元素)" 

width="矩形的宽度"。必需的。

height="矩形的高度"。必需的。

circle 

定义一个圆

cx="圆的x轴坐标"

cy="圆的y轴坐标"

r="圆的半径". 必需.

ellipse 

定义一个椭圆

cx="椭圆x轴坐标"

cy="椭圆y轴坐标"

rx="沿x轴椭圆形的半径"。必需。

ry="沿y轴长椭圆形的半径"。必需。

line 

定义一条线

x1="直线起始点x坐标"

y1="直线起始点y坐标"

x2="直线终点x坐标"

y2="直线终点y坐标"

polygon

定义一个多边形

points="多边形的点。点的总数必须是偶数"。必需的

polyline

定义一条折线

points=折线上的"点"。必需的

path 

定义一个路径

d="定义路径指令"

  • M = moveto

  • L = lineto

  • H = horizontal lineto

  • V = vertical lineto

  • C = curveto

  • S = smooth curveto

  • Q = quadratic Belzier curve

  • T = smooth quadratic Belzier curveto

  • A = elliptical Arc

  • Z = closepath

PS:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。

pathLength="如果存在,路径将进行缩放,以便计算各点相当于此值的路径长度"

transform="转换列表"

 

PS:图示来自慕课网教程。

基本属性

名称

描述

fill

填充颜色

stroke

文本或元素轮廓颜色

stroke-width

文本或元素轮廓厚度

transform

图形变换

基础操作API

名称

描述 参数说明
document.createElementNS(namespaceURI, qualifiedName[, options]) 创建图形 由于篇幅很大,请查看一下地址:
https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS
namespaceURI:XML命名空间,避免元素命名冲突的方法。
例如:
HTML - Use http://www.w3.org/1999/xhtml
SVG - Use http://www.w3.org/2000/svg

element.appendChild(childElement)

添加图形

向节点添加最后一个子节点。

element.setAttribute(name, value)

element.getAttribute(name)

设置/获取属性

设置/获取属性

 完整示例

<style>
     .demo{
          fill:red;
          stroke:black;
          stroke-width:4;
          opacity:0.5;
     }
</style>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="20" rx="20" ry="20" width="250" height="100" class="demo"/>
  <circle cx="60" cy="200" r="40" class="demo"/>
  <ellipse cx="80" cy="300" rx="60" ry="20" class="demo"/>
  <line x1="20" y1="350" x2="300" y2="350" class="demo"/>
  <polygon points="220,150 300,210 170,250" class="demo"/>
  <polyline points="20,400 60,400 60,450 100,450" class="demo"/>
  <path d="M250 400 L150 450 L350 450 Z" class="demo"/>
</svg>

效果:

注意:

1. 由于绘制路径(path)的复杂性,因此强烈建议使用SVG编辑器来创建复杂的图形。

2. 详细文档可以查看:https://www.w3.org/TR/SVG/

 

参考文献

1. http://www.runoob.com/svg/svg-reference.html 【SVG 参考手册】

2. http://www.imooc.com/learn/143

 

本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。

本文地址 :http://www.cnblogs.com/lovesong/p/5964391.html

posted @ 2016-10-15 14:43  海角在眼前  阅读(938)  评论(0编辑  收藏  举报