svg在html里按比例缩小,web前端：svg放大缩小后的比例

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

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