案例一:靶心
<div style="width:400;height: 400;background-color: white;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width='100%' height=100%>
<g transform='translate(200,200)' stroke='red' stroke-width='5'>
<circle r='80' fill='transparent'></circle>
<circle r='60' fill='transparent'></circle>
<circle r='40' fill='transparent'></circle>
<circle r='20' fill='transparent'></circle>
</g>
</svg>
</div>
<g>标签:是一个容器(分组)标签,用来组合元素的,可以添加id属性
1. 里面可以添加公共属性
2.. transform='translate(200,200)': 表示对图形进行平移
注意:svg属性中的宽高必须有,transform = 'translate(0,0)'里面不能使用百分比
1. <text>标签
水平居中:text-anchor='middle'(居中)
text-anchor='start'(靠右:默认)
text-anchor='end'(靠左)
垂直居中:文字的一半再减去2,再加上Y(可用但不规范)
2.. <image>标签
<image x='200' y='200' width='100' height='100' xlink:href='路径'></image>
3. JS动态创建svg
1. 创建 :createElementNS(命名空间,标签名)
封装createTag函数
分离数据
window.onload = function (){
document.ctreateElementNS()
}
案例二:兴趣图谱
<div id="parent" style=" width: 780px; height: 400px; background-color: white;
margin: 20px auto; overflow: hidden;">
</div>
<script>
window.onload = function () {
var svgNS = "http://www.w3.org/2000/svg";
var oParent = document.getElementById("parent");
var centerX = oParent.offsetWidth / 2;
var centerY = oParent.offsetHeight / 2;
var circleNum = 9;
var angleNum = 360 / circleNum;
var centerR = 150;
var otherDate = [];
for (var i = 0; i < circleNum; i++) {
var y = Math.sin((i * 40 * Math.PI) / 180) * centerR + centerY;
var x = Math.cos((i * 40 * Math.PI) / 180) * centerR + centerX;
otherDate.push({ x, y, text: i });
}
var date = {
centerNode: { text: "keluzi" },
otherNode: otherDate,
};
function createTag(tag, objAttr) {
var oTag = document.createElementNS(svgNS, tag);
for (var attr in objAttr) {
oTag.setAttribute(attr, objAttr[attr]);
}
return oTag;
}
function addTag() {
var oSvg = createTag("svg", { xmlns: svgNS, width: "100%", height: "100%", });
for (let i = 0; i < date.otherNode.length; i++) {
addOtherTag(date.otherNode[i], oSvg);
}
var oG = createTag("g", { style: "cursor:pointer" });
var oCircle = createTag("circle", {
cx: centerX,
cy: centerY,
r: "40",
fill: "white",
stroke: "red",
"stroke-width": "1",
});
var oText = createTag("text", {
x: centerX,
y: centerY + 8,
"font-size": "20",
"text-anchor": "middle",
});
oText.innerHTML = date.centerNode.text;
oG.appendChild(oCircle);
oG.appendChild(oText);
oSvg.appendChild(oG);
oParent.appendChild(oSvg);
}
addTag();
function addOtherTag(otherAttr, oSvg) {
var oG = createTag("g", { style: "cursor:pointer", class: "lineStyle", });
var oLine1 = createTag("line", {
x1: otherAttr.x,
y1: otherAttr.y,
x2: centerX,
y2: centerY,
stroke: "#ccc",
});
var oLine2 = createTag("line", {
x1: otherAttr.x,
y1: otherAttr.y,
x2: centerX,
y2: centerY,
stroke: "transparent",
"stroke-width": "10",
});
var oRect = createTag("rect", {
x: (otherAttr.x + centerX) / 2 - 10,
y: (otherAttr.y + centerY) / 2 - 10,
fill: "#999",
width: "20",
height: "20",
rx: "5",
});
var oText = createTag("text", {
x: (otherAttr.x + centerX) / 2,
y: (otherAttr.y + centerY) / 2 + 8,
fill: "white",
"font-size": "20",
"text-anchor": "middle",
});
oText.innerHTML = "?";
oG.appendChild(oLine1);
oG.appendChild(oLine2);
oG.appendChild(oRect);
oG.appendChild(oText);
oSvg.appendChild(oG);
oParent.appendChild(oSvg);
var oG = createTag("g", { style: "cursor:pointer", class: "circleStyle", });
var oCircle = createTag("circle", {
cx: otherAttr.x,
cy: otherAttr.y,
r: "30",
fill: "white",
stroke: "red",
"stroke-width": "1",
});
var oText = createTag("text", {
x: otherAttr.x,
y: otherAttr.y + 8,
"font-size": "20",
"text-anchor": "middle",
});
oText.innerHTML = otherAttr.text;
oG.appendChild(oCircle);
oG.appendChild(oText);
oSvg.appendChild(oG);
}
bindTag();
function bindTag() {
var aLine = document.getElementsByClassName("lineStyle");
var aCircle = document.getElementsByClassName("circleStyle");
for (var i = 0; i < aCircle.length; i++) {
aCircle[i].onmouseenter = function () {
startMove(this.getElementsByTagName("circle")[0], 30, 40);
var prevLine = this.previousElementSibling;
prevLine
.getElementsByTagName("line")[0]
.setAttribute("stroke", "blue");
prevLine
.getElementsByTagName("rect")[0]
.setAttribute("fill", "red");
};
aCircle[i].onmouseleave = function () {
startMove(this.getElementsByTagName("circle")[0], 40, 30);
var prevLine = this.previousElementSibling;
prevLine
.getElementsByTagName("line")[0]
.setAttribute("stroke", "#ccc");
prevLine
.getElementsByTagName("rect")[0]
.setAttribute("fill", "#999");
};
}
for (var i = 0; i < aLine.length; i++) {
aLine[i].onmouseenter = function () {
this.getElementsByTagName("line")[0].setAttribute( "stroke", "blue" );
this.getElementsByTagName("rect")[0].setAttribute("fill", "red");
var prevCircle = this.nextElementSibling;
startMove(prevCircle.getElementsByTagName("circle")[0], 30, 40);
};
aLine[i].onmouseleave = function () {
this.getElementsByTagName("line")[0].setAttribute( "stroke", "#ccc" );
this.getElementsByTagName("rect")[0].setAttribute("fill", "#999");
var prevCircle = this.nextElementSibling;
startMove(prevCircle.getElementsByTagName("circle")[0], 40, 30);
};
}
}
function startMove(obj, r1, r2) {
var nowR = r1;
var overR = r2;
obj.speed = 0;
clearInterval(obj.timer);
obj.timer = setInterval(function () {
obj.speed += (overR - nowR) / 6;
obj.speed *= 0.8;
if (Math.abs(overR - nowR) <= 1 && Math.abs(obj.speed) <= 1) {
clearInterval(obj.timer);
obj.setAttribute("r", overR);
} else {
nowR += obj.speed;
obj.setAttribute("r", nowR);
}
}, 30);
}
};
</script>
案例三:测距
<di id="div1" style=" width: 780px; height: 400px; background-color: white;
margin: 20px auto; overflow: hidden; " >
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" version="1.1"
width="100%" height="100%" >
</svg>
</div>
<script>
window.onload = function () {
var svgNS = "http://www.w3.org/2000/svg";
var oParent = document.getElementById("div1");
var oSvg = document.getElementById("svg1");
var oPolyLine = null;
var pointsNum = "";
function createTag(tag, objAttr) {
var oTag = document.createElementNS(svgNS, tag);
for (var attr in objAttr) {
oTag.setAttribute(attr, objAttr[attr]);
}
return oTag;
}
oSvg.onmousedown = function (ev) {
var ev = ev || window.event;
if (!oPolyLine) {
oPolyLine = createTag("polyline", {
fill: "none",
stroke: "red",
"stroke-width": "2",
});
oSvg.appendChild(oPolyLine);
}
var x = ev.clientX - oParent.offsetLeft;
var y = ev.clientY - oParent.offsetTop;
if (pointsNum == "") {
pointsNum = x + "," + y;
} else {
pointsNum += "," + x + "," + y;
}
oPolyLine.setAttribute("points", pointsNum);
var oCircle = createTag("circle", {
cx: x,
cy: y,
r: "5",
fill: "white",
stroke: "red",
"stroke-width": "3",
});
oSvg.appendChild(oCircle);
};
oSvg.onmousemove = function (ev) {
var ev = ev || window.event;
if (oPolyLine) {
var x = ev.clientX - oParent.offsetLeft;
var y = ev.clientY - oParent.offsetTop;
oPolyLine.setAttribute("points", pointsNum + "," + x + "," + y);
}
};
oSvg.oncontextmenu = function () {
oSvg.onmousemove = null;
return false;
};
};
</script>
4. <path>:路径
M-起始坐标点命令
L-后续坐标点命令
Z-收尾自动闭合(放在最后)
H-水平绘制
V-垂直绘制
大写相对于画布的坐标,小写字母相当于线段长度
A-绘制弧形
- X半径
- Y半径
- 角度
- 弧长 - 0 小弧 - 1 大弧
- 方向 - 0 逆时针 - 1 顺时针
- 终点X坐标
- 终点Y坐标
5. animate标签
- attributeName :运动的属性
- dur:时间
- from : 开始起点
- to:结束终点
案例:占比环形图(比例大于50%后图形会变形)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>svg_path</title>
</head>
<body style="background-color: #000">
<div
id="div1"
style="
width: 780px;
height: 400px;
background-color: white;
margin: 20px auto;
overflow: hidden;
"
>
<svg
id="svg1"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="100%"
height="100%"
>
<!-- <path d='M50 100L200 200L100 100Z M300 100 L 300 300' stroke='black' stroke-width='5' fill='none'></path> -->
<!-- 200表示线段最右边到盒子最左边距离 -->
<!-- <path d='M50 100H200V200' stroke='black' stroke-width='5' fill='none'></path> -->
<!-- <path d='M100 100A100 100 0 0 0 200 200' stroke='black' stroke-width='5' fill='none'></path> -->
<!-- <path d='M150 150A100 100 0 0 1 250 150L225 175A50 50 0 0 0 175 175 Z' stroke='black' stroke-width='5' fill='none'></path> -->
</svg>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script>
window.onload = function () {
var svgNS = "http://www.w3.org/2000/svg";
var oParent = document.getElementById("div1");
var oSvg = document.getElementById("svg1");
var oPath = oSvg.getElementsByTagName("path");
function createTag(tag, objAttr) {
var oTag = document.createElementNS(svgNS, tag);
for (var attr in objAttr) {
oTag.setAttribute(attr, objAttr[attr]);
}
return oTag;
}
var arrNum = [23.32, 15.56, 18.65, 8.02, 11.26, 23.19];
var angle = 360;
var outerR = 120;
var innerR = 70;
var centerX = 200;
var centerY = 200;
var arrColor = [
"red",
"blue",
"orange",
"yellow",
"green",
"pink",
"gray",
];
for (var i = 0; i < arrNum.length; i++) {
var oPath = createTag("path", { fill: arrColor[i] });
oSvg.appendChild(oPath);
}
$("#div1").animate(
{ move: "auto" },
{
duration: 500,
easing: "linear",
step: function (a, b) {
// b.pos;
var sumNum = 0;
var outerXY = [{ x: 320, y: 200 }];
var innerXY = [{ x: 270, y: 200 }];
for (let i = 0; i < arrNum.length; i++) {
var agNum = (arrNum[i] / 100) * angle;
sumNum += agNum;
// if(i == arrNum.length-1){
// sumNum = 360
// }
var outerX =
Math.cos((sumNum * b.pos * Math.PI) / 180) * outerR +
centerX;
var outerY =
Math.sin((sumNum * b.pos * Math.PI) / 180) * outerR +
centerY;
outerXY.push({ x: outerX, y: outerY });
var innerX =
Math.cos((sumNum * b.pos * Math.PI) / 180) * innerR +
centerX;
var innerY =
Math.sin((sumNum * b.pos * Math.PI) / 180) * innerR +
centerY;
innerXY.push({ x: innerX, y: innerY });
}
for (var i = 0; i < outerXY.length; i++) {
if (i == outerXY.length - 1) {
break;
}
var oPath = createTag("path", {
fill: arrColor[i],
d:
"M" +
outerXY[i].x +
"," +
outerXY[i].y +
"A" +
outerR +
"," +
outerR +
" 0 0 1 " +
outerXY[i + 1].x +
"," +
outerXY[i + 1].y +
"L" +
innerXY[i + 1].x +
"," +
innerXY[i + 1].y +
"A" +
innerR +
"," +
innerR +
" 0 0 0" +
innerXY[i].x +
"," +
innerXY[i].y,
});
oSvg.appendChild(oPath);
}
},
}
);
};
</script>
</div>
</body>
</html>
svg基础菜鸟教程:SVG 教程 | 菜鸟教程