svg用例
圆
<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"
onclick= "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 结束
