项目中遇到一个问题,滚轮缩放或鼠标移动svg的时候,当鼠标放置在svg元素上时,firefox浏览器中的offsetX和offsetY是不准确的,导致缩放和移动会产生便宜,其实问题不是firefox计算问题,比如<svg>元素下有<g>,<g>下面有<text>,现在我们对<text>进行缩放,而offsetX的计算是相对父元素的,所以计算得到的值是相对于<g>标签的(但是google等又能正确计算)。然而不管怎么说,我们希望得到的是子元素相对于<svg>标签的offsetX,所以我们利用jquery提供的offset()
手动计算好了:
var offsetX = e.pageX - $('#svg').offset().left;
var offsetY = e.pageY - $('#svg').offset().top;
这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
网友评论