web前端：svg放大缩小后的比例

作者:小任猿更新于： 2020-03-29 14:32:45

　　可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集)，用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。

　　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图像在放大或改变尺寸的情况下其图形质量不会有所损失。