圆

<circle cx="x" cy="y" r="r" style="stroke:black;fill:none">

线 x1 y1 一个点 x2 y2 第二个点

<line x1="75" y1="95" x2="135" y2="85" style="stroke:black;">

<line x1="75" y1="95" x2="135" y2="85" style="stroke:black;">

折线

<polyline points="168 62,98 10,78 45,50 10,32 62">

//

<polyline points="15 110,45 120,95 120,105 110">

. .

......

移动到（75，90）直线到（65，90）椭圆x=5 y=10椭圆回到（75，90）

<path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90">

.......

. .

. .

. .

矩形 左上角x y

<rect x="10" y="10" height="100" width="100"

stroke="red" fill="green" stroke-width="2"/>

虚线

{stroke-dasharray:73;} ----- 7比3 虚线

<use>

<use xline:href="#g便签id" x="" y="">

格式："0 0 2050 1000",--->(ULCx ULCy UUwidth UUheight)

ULCx 与 ULCy 分別代表「左上角 x」与「左上角 y」。UUwidth 与UUheight 分別代表「使用者单位宽度」与「使用者单位高度」

<script type="text/ecmascript" a3:scriptImplementation="Adobe">

<![CDATA[

function changeColor(evt)

{

var rect = evt.target;

rect.setAttributeNS(null, "fill", "blue")

}

]]></script>

<rect x="5" y="5" width="40" height="40"

fill="red"

οnclick= "changeColor(evt)"/>

</svg>

①②③ //放大缩小变换 coverage

var svg = document.getElementById("coverage_0");

var svgPanel = document.getElementById("coverage_1");

var gridSvg = document.getElementById("coverage_2");

var width = 800;

var height = 400;

var gridLength = 20;

var scale = 1;

svg.setAttribute("width", width);

svg.setAttribute("height", height);

drawGrid(gridSvg, width, height, gridLength);

//绑定鼠标滑轮事件

if (document.addEventListener) {

document.addEventListener('DOMMouseScroll', scrollZoom, false);

}

window.onmousewheel = document.onmousewheel = scrollZoom;

function drawGrid(svgBackground, winWidth, winHeight, gridLength) {

var childs = gridSvg.childNodes;

for (var i = childs.length - 1; i >= 0; i--) {

svgBackground.removeChild(childs.item(i));

}

for (var i = 0, len = Math.ceil(winWidth / gridLength); i <= len; i++) {

var attrs = {

x1: i * gridLength,

y1: 0,

x2: i * gridLength,

y2: winHeight,

stroke: "#ddd"

};

var line = resetSVG("line", attrs);

svgBackground.appendChild(line);

};

for (var i = 0, len = Math.ceil(winHeight / gridLength); i <= len; i++) {

var attrs = {

x1: 0,

y1: i * gridLength,

x2: winWidth,

y2: i * gridLength,

stroke: "#ddd"

};

var line = resetSVG("line", attrs);

svgBackground.appendChild(line);

};

}

function resetSVG(tag, attrs) {

var element = document.createElementNS('http://www.w3.org/2000/svg', tag);

for (var k in attrs) {

element.setAttribute(k, attrs[k]);

}

return element;

}

/**

* svg放缩

* {Float} num 放缩的倍数

*/

function zoom(num) {

scale *= num;

svgPanel.setAttribute("transform", "scale(" + scale + ")");

drawGrid(gridSvg, width * (1 / scale), height * (1 / scale), gridLength);

}

/**

* 滑轮滚动处理事件，向上滚放大

* {Object} e 事件对象

*/

function scrollZoom(e) {

e = e || window.event;

//e.detail用来兼容 FireFox

e.wheelDelta > 0 || e.detail > 0 ? zoom(1.1) : zoom(0.9);

}

// 放大缩小变换，END

六 坐标变换

transform="scale(value)" x y 都乘以value

transform="scale(x-value,y-value)" x y 都乘以x-value

scale

十二章 动画

<animate attributeName="要变化的属性" attributeType="XML" from="1" to"0.75" begin="3s" dur="3s" fill="freeze">（可多个animate并写）

attributeName="fill" from="red" to="green"

attributeType="XML" （CSS）

fill="freeze" // 动作完成后冻结，移除fill属性会回到开始状态（默认remove属性）

begin="id.begin+3s" //上个动画的id加时间

路径 动画

<path d="M15 50 Q 48 15,50 50,65 32,100 40" style="transform="translate(0,50)"">

<animate attributeName="d" attributeType="XML" to="M50 15 Q 15 48,50 50,32 65,40 100" begin="" dur="" fill="freeze"/>

</path>

告警信息

<image id="greentow" xlink:href="选中点亮.png" x="-70" y="258" style="display:none" />

<image id="greenone" xlink:href="选中点亮.png" x="-310" y="258" style="display:block" />

//文字动画

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">

<path id="path"

d="M20,20 Q50,60 80,140 T340,100"

stroke="red"

fill="none"

color=""

/>

<text style="color:red;">

<textPath id="textPath" xlink:href="#path" stroke="red" style="color:red;">蚂蚁部落欢迎您</textPath>

</text>

<animate xlink:href="#textPath"

attributeName="startOffset"

from="0%" to="100%"

begin="0s"

dur="5s"

repeatCount="indefinite"

keyTimes="0;1"

calcMode="spline"

keySplines="0.1 0.2 .22 1"/>

</svg>

路径

<path d="M250 150 L150 350 L350 350 Z" />

M = moveto 移动到M250 150

L = lineto 直线L150 350

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 结束