web前端:svg放大缩小后的比例
软工小能手
2024-04-23 23:08
可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。
svg放大缩小后的比例
functiongetCoords(evt){
//计算出当前屏幕与svg的比例
varcanvas=document.getElementById("canvase");
varviewbox=svgRoot.getAttributeNS(null,"viewBox");//获取ViewBox属性
varparams=viewbox.split("");
//屏幕和svg的比例这是初始化比例
varroteX=svgRoot.clientWidth/parseFloat(params[2]);
varroteY=svgRoot.clientHeight/parseFloat(params[3]);
//用户点击的svg原始坐标,当成屏幕坐标
userCoord.x=evt.layerX;
userCoord.y=evt.layerY;
console.log(svgRoot)
//如果平移
vartx=parseFloat(params[0]),
ty=parseFloat(params[1]);
//如果缩放
//varx_scale=1/roteX,
//y_scale=1/roteY;
//svg坐标
mouseCoord.x=(userCoord.x/roteX+tx)
mouseCoord.y=(userCoord.y/roteY+ty)
}
SVG指可伸缩矢量图形(ScalableVectorGraphics),SVG用来定义用于网络的基于矢量的图形,SVG使用XML格式定义图形,SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失。
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341