下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

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

作者:小任猿     来源: https://www.cnblogs.com/rey888/p/12177366.html点击数:1154发布时间: 2020-03-30 10:22:36

标签: XML格式svg计算机

Web开发

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

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

赞(8)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程