<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>
Recently, I combed the basic knowledge of svg and found that the coordinate values in points are not well understood, as follows:
100,10 40,180 190,60 10,60 160,180
When I first saw this coordinate value, my thinking was imprisoned. 100 thought it was the same xy coordinate value, so I omitted one, but the image presented in the browser did not mean that at all:
I can't figure it out, I just use js to get the coordinate value to understand it, and write the following code:
<!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 coordinate: " + xzb + ", Y coordinate: " + 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>
Conclusion: points=" x1 coordinate, y1 coordinate x2 coordinate, y2 coordinate x3 coordinate, y3 coordinate "