解读svg points坐标值

1
2
3
4
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

最近对svg的基础知识梳理了一下,发现points里坐标值不是很理解,如下:

1
100,10 40,180 190,60 10,60 160,180

刚看到这个坐标值时,思维被禁锢了,100以为是x y 坐标值一样,所以省略了一个,但是浏览器里呈现的图像完全不是这个意思啊:

 

百思不得其解,干脆用js获取坐标值来理解好了,写了下面的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
    <style>
        *{
            margin:0;
            padding:0;
        }
        svg{
            background:red;
            width:300px;
            height:300px;
        }
    </style>
<script type="text/javascript">
    function zuobiao(event){
      xzb=event.clientX
      yzb=event.clientY
      alert("X 坐标: " + xzb + ", Y 坐标: " + yzb)
    }
</script>
     
<body  OnMouseDown="zuobiao(event)">
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>
</svg>
 
</body>
</html>

 

结论:points=" x1坐标,y1坐标  x2坐标,y2坐标    x3坐标,y3坐标 "

 

posted @   qnlz  阅读(1538)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示