匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。12328人阅读
在svg图形中，很重要的概念就是坐标系。首先分析一下width、height、viewBox这三个属性。
width:宽度，这个宽度是指在页面中实际使用的大小，跟div中定义width是同样的含义。
height：高度，含义同上。
viewBox:视图框，是一个由字符串表示的，格式：&0 0 &,---&(ULCx
ULCy UUwidth UUheight)
ULCx 与 ULCy 分別代表「左上角 x」与「左上角 y」。UUwidth 与UUheight 分別代表「使用者单位宽度」与「使用者单位高度」
一般而言，会在使用者空间内，将 SVG 图形物件绘製到相对於使用者空间 (也就是使用者座标系统) 的位置。以相对静态的图形来缩放和移动瀏览时，SVG 图形物件通常绝不会在使用者座标系统中移动；而是使用者座标系统本身会在 (相对於) SVG 检视区中移动 (延著所有其附加的图形)。因此从检视区的观点来看，图形物件已经移动。也就是说，您通常是移动或转换附加图形物件的使用者座标系统，而非图形物件本身。
基於上述说明，ULCx、ULCy、UUwidth 与 UUheight 这四个数字的解释如下：
ULCx 与 ULCy - 会移动使用者座标系统 (会在裡面绘製图形物件) 的原点，这样该点 (ULCx, ULCy) 就会出现在定义的 SVG 检视区的左上角。也就是，将在检视区中移动使用者座标系统视觉化，这样使用者座标点 (ULCx、 ULCy) 就会发生在 SVG 检视区的左上角。这最后将会变成沿著所有「附加」的图形物件移动与检视区相对的使用者座标系统原点。
&svg width=&300px& height=&200px& viewBox=&0 0 300 200&&
在此例中，水平方向每 300 个使用者单位会有 300 像素，而垂直方向每 200 个使用者单位就会有 200 像素。换句话说，每个使用者单位等於一个像素。
&svg width=&300px& height=&200px& viewBox=&0
0 600 400&&
然而，在下列范例中，水平方向每 600 个使用者单位会有 300 像素 (或是每个使用者单位 0.5 像素)，而垂直方向每 400 个使用者单位就会有 200 像素 (或是每个使用者单位 0.5 像素)。请注意，这项变更会造成所有的图形物件大小减半。
JS操作svg:
1、获取子元素：firstChild, firstElementChild,这是由于svg文件中可能会引入&?xml version=&1.0& encoding=&utf-8&?&这样的内容，这时firstChild就会表示这些非HTMLElement元素，包括空格、回车。
2、设置属性：setAttribute('name','value');
3、设置text标签的值：textSvg.firstChild.data ='40',或者使用textContent,其中有一个属性wholeText,但不可用,或者直接textSvg.textContent = '40';
例子一：创建一个circle
gearCircleElement = document.createElementNS(&http://www.w3.org/2000/svg&, &circle&);
gearCircleElement.id = ‘circle’;
gearCircleElement.cx.baseVal.value = 34;
gearCircleElement.cy.baseVal.value = 43;
gearCircleElement.r.baseVal.value = 12;
gearCircleElement.style.fill = '#f00';
例子二：创建文本
gearTextElement = document.createElementNS(&http://www.w3.org/2000/svg&, &text&);
gearTextElement.id = ‘text’;
gearTextElement.setAttribute(&x&, 67);
gearTextElement.setAttribute(&y&, 34);
gearTextElement.setAttribute(&transform&, &translate(3, -3)&); // Offset the text from the center of the circle.
gearTextElement.textContent = &##& ;
gearTextElement.setAttribute(&font-size&, 10);
例子三：创建直线
gearLineElement = document.createElementNS(&http://www.w3.org/2000/svg&, &line&);
gearLineElement.id = &line&;
gearLineElement.x1.baseVal.value = 3;
gearLineElement.y1.baseVal.value = 56;
gearLineElement.x2.baseVal.value = 12;
gearLineElement.y2.baseVal.value = 43;
gearLineElement.style.stroke = &white&;
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：983128次
积分：12457
积分：12457
排名：第848名
原创：329篇
转载：42篇
译文：19篇
评论：374条
文章：36篇
阅读：104668
阅读：91238
(3)(1)(15)(52)(74)(21)(5)(48)(3)(34)(16)(32)(28)(43)(1)(14)Svg Pan Zoom – jQuery插件实现SVG图像平移和缩放
来源：open开发经验库
Svg pan zoom 是一个jQuery插件实现SVG图像平移和缩放，可以通过编程的方式或通过鼠标/触摸事件。特性 
Programmatically manipulate the SVG viewBox 
Mouse and touch events to pan the SVG viewBox 
Mousewheel events to zoom in or out the SVG viewBox 
Animations 
Mousewheel zooming keeps the cursor over the same coordinates relative to the image (A.K.A. GoogleMaps-like zoom) 
Limiting the navigable area 
项目主页：
免责声明：本站部分内容、图片、文字、视频等来自于互联网，仅供大家学习与交流。相关内容如涉嫌侵犯您的知识产权或其他合法权益，请向本站发送有效通知，我们会及时处理。反馈邮箱&&&&。
学生服务号
在线咨询，奖学金返现，名师点评，等你来互动}