svg视口，坐标及形状
SVG视口、坐标及形状 ／ 1-1 SVG简介
svg图像文件格式，设计高分辨率图像，用代码描绘图像，任何文本工具可编辑，直接用浏览器观看，插入代码使图片具有交互功能。
?
?
svg：（scalable vector graphics）可缩放矢量图形。 一种用来描述二维矢量图形的XML标记语言。
svg用来定义用于网络的基于矢量的图形（网络讲究速率，控制文件大小，服务器响应，搜索引擎收录等svg都有优势）。
XML格式定义图形。 svg图像放大改变尺寸情况下，图形质量不会有所损失。（矢量图形，不存在像素点的放大和缩小）。
svg使万维网联盟的标准。 svg与dom和xsl之类的w3c标准是一个整体，像学习html一样学习。
?
?
优势：
svg可被非常多的工具读取，修改（甚至是记事本）。
svg图像中的文本可选，同时可搜索。（适合制作地图）。
小！（svg与jpeg和gif图像（这类叫做位图）比起来，尺寸更小，且可压缩性更强，使用的是图形学的各种数学方式来实现缩放，只需记录几个关键点，没有像素点这么多，并且还可用代码控制）。
可伸缩（svg图像可在任何的分辨率下被高质量打印，质量不下降伸缩放大）。
开放标准：
svg是纯粹的XML语言。
可以与java技术一起运行，与xsl，dom相兼容。
ie查看可能需要插件（新版本不用）。主流浏览器都可直接打开查看。
SVG视口、坐标及形状 ／ 2-1 viewport
svg视口： viewport，viewBox，preserveAspectRatio。
?
?
viewport：svg可见区域的大小，或者可以想象成舞台大小，画布大小。
?
?
<svg width="800" height="600"></svg> 默认单位px。
?
?
单位：
em：相对于父元素的字体大小。
ex：相对于小写字母x的高度。
px：相对于屏幕分辨率而不是视窗大小：通常为1个点或1/72英寸。
in：inch英寸。
cm：centimeter，厘米。
mm：millimeter，毫米。
pt：1/72英寸。
pc：12点活字，或1/12点。
%：相对于父元素。正常情况下是通过属性定义自身或其他元素。
除了svg本身，其他一些元素，例如<rect>的width和height都可使用上面的像素，默认单位都是px
SVG视口、坐标及形状 ／ 2-2 viewBox
viewBox： 视区盒子。
svg就像是我们的显示器屏幕，viewBox就是截屏工具中选中的哪个框框，最终呈现就是把框框中的截屏内容再次在显示器中全屏显示。
语法：
viewBox="x,y,width,height"; //x：左上角横坐标；y：左上角纵坐标；width：宽度；height：高度。
?
结果图：图像中的蓝色区域。宽度为400px，高度为300px是这样的计算方法。
?
preserveAspectRatio属性： 使用preserveAspectRatio属性来让viewBox保持宽高比。 语法： preserveAspectRatio=[defer]<align><meetOrSlice>; []表示可选，<>表示必选。 [defer]： 参数是可选值，它仅仅在image元素(稍微不同于<img>)上应用preserveAspectRatio属性时才使用。在使用其他元素时会被忽略。 <align>参数： <align>参数控制viewBox是否强制进行均匀的缩放。由两个部分组成。两两搭配有九种情况。 取值： xMin：viewBox的最小X值对齐viewport的左边部。 xMid：viewBox的X轴终点对齐vewport的中点。 xMax：viewBox的最大X值对齐viewport的右边部。 YMin：viewBox的最小Y值对齐viewport的顶边。 YMid：viewBox的Y轴中点对齐viewport的Y轴中点。 YMax：viewBox的最大Y值对齐viewport的底边。
SVG视口、坐标及形状 ／ 2-4 preserveAspectRatio
<meetOrSlice>参数： 通俗来说，该参数控制viewBox缩放的方式：
取值：
meet：保持宽高比并将viewBox缩放为适合viewport的大小。（有留白，默认，类似position-size：contain）
slice：保持宽高比并将图片放大到整个viewport的大小，所有不在viewport中的viewBox剪裁掉。（有溢出，类似position-size：cover）
none：不保存宽高比。缩放图像适合整个viewBox，可能会发生图像变形。（当有none存在时，不允许<align>出现，none才会有效果）
设置为meet时，变换Y轴的值无效。
设置为slice时，变换X轴的值无效。
?
?
xmlns="http://www.w3.org/2000/svg"表明了整个svg元素默认的命名空间是svg。
图片放在里面只能用<image xlink:href="路径" width="不要单位" height="不要单位（不填会按原图大小显示）">
?SVG视口、坐标及形状 ／ 3-1 世界坐标系统
世界坐标系统：
浏览器的坐标系统，计算机图形学中的世界坐标系：
原点在左上角，向下为y轴正方向，向右为x轴正方向。
?
SVG视口、坐标及形状 ／ 3-3 最初坐标系统
最初坐标系统：
<svg width="800" height="400"></svg>
当定义svg元素的时候浏览器就产生了一个最初坐标系统，
?
SVG视口、坐标及形状 ／ 3-4 用户坐标系统
用户坐标系统： <svg width="800" height="400"> <rect x=‘200‘ y=‘100‘ width=‘400‘ height=‘200‘>//这里的x，y为用户坐标系统的值 </svg>
SVG视口、坐标及形状 ／ 3-5 转换坐标系统转换坐标系统： 类似transform，svg元素可以通过缩放，移动，倾斜和旋转来变换。 transform属性： <rect transform="translate(100)"> css3的transform虽然也可用于svg元素，但是ie不支持。 ? ? css3 transform和svg transform： 相似之处： 基本变换类型一样，包括translate，rotate，scale，skew，matrix。 不同之处： svg中，transform的坐标变换是相对于（最初坐标系）画布左上角进行计算； svg transform属性语法略微自带偏移（更加符合svg），css transform更加纯粹（直接的变换）。 svg只支持二维变换。 ? ? ?transform="translate( <tx> [<ty>] )"; 参数说明： tx代表x轴上的translation值， ty代表y轴上的translation值。 ty值是可选的，如果省略，默认值是0。 当多个参数值的时候，可以使用逗号，或者直接空格分隔。 ！！！数值中一定一定一定不能包含单位。 特别说明： HTML元素的偏移是相对自己的中心点（直接移动元素），svg元素的偏移是相对svg画布的左上角（整个坐标系统发生偏移，针对偏移后的坐标系统再定义元素位置）。 等价效果： 单纯从位移来讲，无论你相对于哪个位置，实际偏移的位置都是一样的，因此，从表现上讲，两者最终的位置看上去还是一样的。但渲染机制不一样。 ? transform="scale( <sx> [<sy>] )"; 参数说明： sx代表x轴上的缩放值，用来水平延长或者拉伸元素。 sy代表y轴上的缩放值。用来垂直延长或者缩放元素。 sy值是可选的，如果省略，默认值是sx(等比例缩放)。 特别说明： HTML元素的缩放是相对自己的中心点，svg元素的缩放是相对于svg的左上角。 当svg元素缩放时，整个坐标系被缩放，导致元素再视窗中重新定位。 ? transform="skewX(<skew-angle>)"; transform="skewY(<skew-angle>)"; 函数skewX声明一个沿x轴的倾斜，函数skewY声明一个沿y轴的倾斜。 分开多次连续斜切最终的坐标偏移要比一次性偏移来得小。 transform="skewX(a1) skewX(a2)"的最终位置和transform="skewX(a1+a2)"是不一样的，因为斜切的角度和元素偏移大小并不是线性的。 斜切尽可能一次到位，不要像前者。
SVG视口、坐标及形状 ／ 3-8 CSS3与SVG2
css3与svg2：【展望，暂时别使用】
使用css属性变换svg2：
在svg2中，svg变换已经被引入css3变换规范中。
css3变换规范结合了svg变化，把类似transform-origin和3D transform引入了svg。
流行版本svg1.1。先不使用2，展望。
?
单位：
css变换函数接受角度和坐标单位，例如角度的rad(radians)和坐标的px，em等。
css控制svg，ie不兼容，先做观望。
?
3D变换： svg元素也可以使用css 3D变换在三位空间中变换。
SVG视口、坐标及形状 ／ 4-1 svg绘画各种形状svg绘画各种形状： 矩形<rect>，圆形<circle>，椭圆<ellipse>，线<line>，折线<polyline>，多边形<polygon>。 重要概念：路径<path> ? <rect>元素会在屏幕上绘制一个矩形。 <rect x=‘x‘ y=‘y‘ rx=‘rx‘ ry=‘ry‘ width=‘width‘ height=‘height‘ /> 基本属性： x：矩形左上角的x位置；y：矩形左上角的y位置；width矩形的宽度，height：矩形的高度；rx：圆角的x方位的半径，默认为0；圆角的y方位的半径，默认为0。 ? <circle>元素会在屏幕上绘制一个圆。 <circle cx="cx" cy="cy" r="r" /> 基本属性：（都无法省略,省略默认为0） r：圆的半径； cx：圆心的x位置； cy：圆心的y位置； ? ?<ellipse>是circle元素更通用的形式，可以分别缩放圆的x半径和y半径。 <ellipse cx="cx" cy="cy" rx="rx" ry="ry" /> 基本属性：（都无法省略,省略默认为0） rx：圆的x半径； ry：圆的y半径； cx：椭圆中心的x位置； cy：椭圆中心的y位置； ? ?<line>绘制直线。 <line x1="x1" y1="y2" x2="x2" y2="y2" /> 基本属性：x1：起点的x位置；y1：起点的y位置；x2：终点的x位置；y2：终点的y位置。 ? ?<polyline>是一组连接在一起的直线。 <polyline points="x1 y1,x2 y2,x3 y3,........,xn yn" />//建议这样写法。 points：点集数列，每个数字用空白符，逗号，终止命令或者换行符分隔开； 每个点必须包含2个数字，一个是x坐标，一个是y坐标。 ? <polygon>和折线很像，不同的是，polygon的路径在最后一个点处自动回到第一个点。 属性和polyline相同，最后一个点和第一个点会自动闭合。 ? <path>元素不仅能创建其他基本形状，还能创建更多其他形状。 定义属性： path元素的形状是通过属性d定义的，属性d是一个点集数列以及其他关于如何绘制路径的信息，值是一个“命令+参数”的序列。 属性命令： 每个命令都用一个关键字母表示，比如字母M表示的是Move to命令。 每个命令都有两种表示方式：大写字母，表示绝对定位（根据整个坐标系，定位到坐标位置）；小写字母，表示相对定位（在当前基础上，横纵坐标增加xxx）。 属性d采用用户坐标系统，故不需表明单位。 ? ?形状里面的属性：fill=""填充颜色，可以用颜色，十六进制，rgb来填写。 fill-opacity="0-1":填充颜色透明度，0-1. stroke="颜色"：边框颜色。 stroke-width="":边框宽度。 stroke-opacity="":边框的透明度。 opacity=""定义整个元素的透明度。
?
SVG视口、坐标及形状 ／ 4-3 直线命令
path直线命令：在两个点之间画直线。直线命令严格来说只有LHV三个值。
<path d="M x y L x y H x V y Z" /> <path d="m dx dy I dx dy h dx v dy z">
?
?
M x y（or m dx dy）： "Move to"命令，移动画笔而不画线，故M命令常出现于路径开始处，指明路径开始位置。
M x y表示需要将画笔移动到坐标（x，y）位置；
m dx dy表示需要将画笔像右边移动dx像素，向下移动dy像素。
?
?
L x y（or l dx dy）： "Line to"命令，会在当前位置和新位置（L前面画笔所在的点）之间画一条线段。
L x y表示从L命令之前的点到（x，y）点之间画一条线段；
l dx dy表示在从l命令之前的点到相对向右dx像素向下dy像素的点之间画一条线段。
?
H x（or h dx）： 绘制水平线。H x表示绘制到x轴上的x点位置；h dx表示向右绘制dx像素;
?
V y（or v dy）： 绘制垂直线。V y表示绘制到y轴上的y点位置；v dy表示向右绘制dy像素;
?
Z（or z）: 闭合路径命令。从当前点画一条直线到路径的起点，不区分大小写。
?
SVG视口、坐标及形状 ／ 4-5 曲线命令
曲线命令： 绘制平滑曲线的命令分为贝塞尔曲线和弧形两种。
?
?
贝塞尔曲线： 应用于二维图形应用程序的数学曲线。
贝兹曲线由线段于节点组成，节点是可拖动的支点，线段像可伸缩的皮筋。
在path元素里，只存在两种贝塞尔曲线：三次贝塞尔曲线C，和二次贝塞尔曲线Q。
?
弧形： 基本上，弧形可以视为圆形或椭圆形的一部分。
?
三次贝塞尔曲线：
C x1 y1,x y（or c dx1 dy1,dx2 dy2,dx dy）： 最后一个坐标（x，y）表示曲线的终点，另外两个坐标是控制点，（x1，y1）是起点的控制点，（x2，y2）是最终点的控制点。
控制点描述曲线上各个点的斜率，是从起点斜率到终点斜率的渐变过程。
?
?
S x2 y2,x y（or s dx 2 dy2,dx dy）: S命令用于将若干个贝塞尔曲线连起来，从而创建出一条很长的平滑曲线。 若S命令跟在C命令或另一个S命令后面，它第一个控制点，会被假设成前一个控制点的对称点。
若S命令单独使用，前面没有C命令或S命令，那它的两个控制点就会被假设为同一个点。
?
<path d="M10 80 C 40 10,65 10,95 80 S 150 150,180 80" stroke="#C7000B" fill="transparent"/>
?
二次贝塞尔曲线：
Q x1 y1,x y（or q dx1 dy1,dx dy）： 最后一个坐标（x，y）表示曲线的终点，另外一个坐标（x1，y1）是控制点。
只需要一个控制点，用来确定起点和终点的曲线斜率。
?
T x y（or t dx dy）： T命令类似S命令，用于将若干个内塞尔曲线连起来，从而创建出一条很长的平滑曲线。和之前一样，快捷命令T会通过前一个控制点，根据对称推断出一个新的控制点。
若T单独使用，那控制点就会被认为和终点是同一个点，所以画出来的将是一条直线。
?
<path d="M10 80 Q 52.5 10,95 80 T 180 80" stroke="#C7000B" fill="transparent"/>
SVG视口、坐标及形状 ／ 4-6 弧形
弧形：
命令定义：
A rx ry x-axis-rotation large-arc-flag sweep-flag x y;
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy;
?
?
rx和ry分别是椭圆的x轴半径和y轴半径；
x-axis-rotation控制椭圆的旋转角度，默认角度deg，正方向为顺时针；
large-arc-flag绝对弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧；
sweep-flag表示弧线方向，0表示从起点到终点沿椭圆逆时针画弧，1表示沿顺时针画弧；
x和y指定弧形的终点。
?
<path d="M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10" stroke="#C7000B" fill="green" />
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
