svg学习笔记（一）

• SVG学习笔记（一）

 1，  在SVG文件中外部引用脚本文件，只能同级目录引用，跨目录以SVG基本的相对路径。<script xlink:href="control.js"></script>

 2，  坐标系变化坐标变换的使用方式：<g transform="...">  <!--other elements>  ...</g> 1、平移变换（translate）      平移表达式transform="translate(x,y)"，即新坐标系的原点在原坐标系的（x,y）处。坐标轴的方向不变。 2、旋转变换（rotate）      transform="rotate(angle cx,cy)"。angle代表旋转角度，缺省单位是“度”，瞬时针为正，逆时针为负。（cx,cy）是旋转中心所在的坐标。若省略旋转中心坐标，则缺省值是（0,0）。 3、伸缩变换（scale）      transform="scale(sx,sy)"，sx,sy分别代表x轴方向和y方向拉伸或缩小的比例因子。拉伸：大于1；缩小：小于1。若省略sy，即sy=sx，作等比例缩放。 4、歪斜变换（skew）      transform="skewX(x-angle)"或transform="skewY(y-angle)"，x-angle,y-angle分别代表沿x轴和y轴歪斜的角度。 5、矩阵变换（matrix）      transform="matrix(a b c d e f)"，这里的六个参数分别是变换矩阵中的六个参数。特点是灵活性大，无论多么复杂的变换，只需进行一次矩阵运算即可。二维坐标变换基本公式：x     a  c  e     x1y =  b  d  f  *  y11     0  0 1      1其中 ，x,y是旧坐标，x1,y1是新坐标。其中矩阵变换(matrix)咱不清楚，如何计算。坐标轴的转换大部分都用在group对象上，它将影响组中的所有元素。

3、显示中文问题       

把*.svg的存储格式必须是UTF-8 , <?xml version="1.0" encoding="UTF-8"?> 例子：          <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg width="400" height="400"     xmlns="http://www.w3.org/2000/svg">  <desc>sdfasdf</desc>  <rect x="1" y="1" width="350" height="350"        fill="none" stroke="blue" />  <text style="fill:black;" font-size="30" font-family="LiSu "                   x="100" y="100" width="200" height="30">   西安建筑科技大学  </text></svg> 字体对应关系： SimSun                           宋体     SimHei                           黑体    FangSong_GB2312    仿宋_GB2312    KaiTi_GB2312             楷体_GB2312    YouYuan                       幼圆    STSong                        华文宋体    STZhongsong             华文中宋    STKaiti                         华文楷体    STFangsong               华文仿宋    STXihei                         华文细黑    STLiti                             华文隶书    STXingkai                     华文行楷    STXinwei                       华文新魏    STHupo                         华文琥珀    STCaiyun                      华文彩云    FZYaoTi                        方正姚体简体    FZShuTi                        方正舒体简体    NSimSun                        新宋体    LiSu                                  隶书 

4、编码格式的统一。

要求编码格式不需一致，否则SVG可能工作不正常。例如：eg.svg编码格式”UTF-8”,它内部引用的脚本编码格式也必须为”UTF-8”。