WebFrontend SVG
2017-11-25
<!doctype html>
<html lang="en" xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body style="width:1000px;margin:10px auto;">
<svg
id="example"
width="1000"
height="800"
xmlns="https://www.w3.org/2000/svg"
>
<!-- 画个框框当边界 -->
<rect
x="0"
y="0"
width="100%"
height="100%"
fill="none"
stroke="rgb(99,99,99)"
stroke-width="2"
/>
<circle
id="circle1"
class="dragable"
cx="100"
cy="100"
r="30"
fill="red"
fill-opacity="0.7"
/>
<circle
id="circle2"
class="dragable"
cx="200"
cy="100"
r="30"
fill="yellow"
fill-opacity="0.7"
/>
<circle
id="circle3"
class="dragable"
cx="300"
cy="100"
r="30"
fill="blue"
fill-opacity="0.7"
/>
</svg>
</body>
<script>
var svg = document.getElementById("example"),
target = null,
startPoint = svg.createSVGPoint(),
curPoint = svg.createSVGPoint();
function refreshPoint(event) {
curPoint.x = event.clientX;
curPoint.y = event.clientY;
}
var dragables = document.getElementsByClassName("dragable");
for (var i = 0; i < dragables.length; i++) {
var dragable = dragables[i];
dragable.addEventListener("mousedown", function (event) {
target = event.target;
refreshPoint(event);
var matrix = target.getCTM();
startPoint.x = curPoint.x - matrix.e;
startPoint.y = curPoint.y - matrix.f;
});
}
svg.addEventListener("mousemove", function (event) {
if (!target) return;
refreshPoint(event);
var newX = curPoint.x - startPoint.x;
var newY = curPoint.y - startPoint.y;
target.setAttributeNS(
null,
"transform",
"translate(" + newX + "," + newY + ")",
);
});
svg.addEventListener("mouseup", function (event) {
if (!target) return;
target = null;
});
</script>
</html>
WebFrontend SVG
2017-11-25
- svg 标签
xmlnsviewBox- 形状
- 矩形
rect
- 圆形
circle
- 椭圆
ellipse
- 线条
line
- 多边形
polygon
- 折线
polyline
- 路径
path
- 通用属性
stroke: 边框颜色stroke-width: 边框宽度fill: 填充颜色style
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body style="background-color:beige;width:800px;margin:0 auto;">
<svg id="example" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 800">
<!--
-->
<rect
x="0"
y="0"
width="100%"
height="100%"
fill="none"
stroke="rgb(99,99,99)"
stroke-width="2"
/>
<line
x1="800"
y1="0"
x2="0"
y2="800"
style="stroke:rgb(99,99,99);stroke-width:2"
/>
<line
x1="0"
y1="0"
x2="800"
y2="800"
style="stroke:rgb(99,99,99);stroke-width:2"
/>
<circle cx="400" cy="400" r="100" />
<ellipse cx="400" cy="150" rx="120" ry="60" />
<polygon points="250,300 130,520 50,350" />
<polygon points="80,40 120,60 80,80 60,120 40,80 0,60 40,40 60,0 80,40" />
<polyline
points="150,750 170,800 190,750 210,800 230,750"
fill="none"
stroke="rgb(99,99,99)"
stroke-width="2"
/>
<rect x="550" y="325" width="200" height="150" />
<text
xml:space="preserve"
text-anchor="start"
font-family="Helvetica, Arial, sans-serif"
font-size="24"
x="400"
y="600"
fill-opacity="null"
stroke-opacity="null"
stroke-width="0"
stroke="#000"
fill="#000000"
>
@
</text>
<!--
https://editor.method.ac/#move_front
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
-->
<path
d="m395.5,698c0,0 1,0 4,0c4,0 8.29361,2.7265 12,7c3.276,3.77728 6.54135,7.7027 8,11c1.66803,3.77063 1.79395,8.08746 4,13c1.83203,4.07965 3,6 3,8c0,2 0,3 0,5c0,2 0.70709,3.29291 0,4c-0.70709,0.70709 -3,1 -4,1c-1,0 -3,0 -4,0c-1,0 -3,0 -4,0c-1,0 -2,0 -3,0c-1,0 -2.186,0.30743 -4,-1c-1.14728,-0.8269 -2,-2 -2,-3c0,-1 -0.22977,-3.02673 0,-4c0.51373,-2.17627 2.07339,-2.93164 3,-4c3.276,-3.77728 6,-7 9,-10c3,-3 4.79489,-5.22021 8,-8c3.77728,-3.276 6.21167,-5.71411 9,-8c2.18735,-1.79321 4.186,-2.69257 6,-4c2.29453,-1.65381 3,-2 4,-2l1,0l2,-1l1,0"
fill-opacity="null"
stroke-opacity="null"
stroke-width="2"
stroke="#000"
fill="none"
/>
</svg>
</body>
</html>