解读svg points坐标值
生活随笔
收集整理的這篇文章主要介紹了
解读svg points坐标值
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polygon points="100,10 40,180 190,60 10,60 160,180" /> </svg>
最近對svg的基礎知識梳理了一下，發現points里坐標值不是很理解，如下：
100,10 40,180 190,60 10,60 160,180
剛看到這個坐標值時，思維被禁錮了，100以為是x y 坐標值一樣，所以省略了一個，但是瀏覽器里呈現的圖像完全不是這個意思啊：
百思不得其解，干脆用js獲取坐標值來理解好了，寫了下面的代碼：
<!DOCTYPE html>
<html>
<style>
*{
margin:0;
padding:0;
}
svg{
background:red;
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"/>
</svg>
</body>
</html>
結論：points=" x1坐標,y1坐標 x2坐標,y2坐標 x3坐標,y3坐標"
總結
以上是生活随笔為你收集整理的解读svg points坐标值的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用blastn比对自己建立的数据库
- 下一篇： 比亚迪周？全新王朝 MPV 车型谍照曝光