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