前端图形 - SVG - 《前端手记》

SVG简介
坐标定位
基础元素
- 罗列
- demo
其他重要元素
样式
动画

SVG简介

SVG 意为可缩放矢量图形（Scalable Vector Graphics）

优缺点：

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
很强的文本渲染能力
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

应用场景:
google地图-支持伸缩，不失真

坐标定位

了解下SVG的坐标定位，这种坐标系统和我们小时候学习的绘图坐标是相反的，但是在html中都是用如下方式来定位。

以页面的左上角为（0,0）坐标点
坐标以像素为单位
X轴正方向是向右
Y轴正方向是向下

SVG - 图1

基础元素

SVG中提供了很多基础元素可以用来绘制基础的形状，譬如矩形、圆形、椭圆、多边形、折线、线条、路径等，同时可以将这些基础形状组合绘制出复杂的图像

可以参考教程网站：https://www.w3cschool.cn/svg/svg-tutorial.html

罗列

SVG - 图2

demo

<svg width="600" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <!--矩形-->
  <rect x="10" y="10" width="30" height="60" stroke="#9B7B56" fill="transparent" stroke-width="10"/>
  <!--圆角矩形-->
  <rect x="60" y="10" rx="10" ry="10" width="60" height="40" stroke="#FF9090" fill="transparent" stroke-width="5"/> 
  <!--圆形-->
  <circle cx="180" cy="50" r="40" stroke="green" fill="#C3413D" stroke-width="5"/>  
   <!--椭圆-->
  <ellipse cx="320" cy="28" rx="80" ry="20" stroke="#FFC302" fill="transparent" stroke-width="5"/> 
  <!--直线-->
  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
   <!--折线-->
  <polyline points="60,110 65,120 70,115 75,130 80,125 85,140 90,135 95,150 100,145" stroke="#9B7B56" fill="transparent" stroke-width="5"/>
  <!--多边形-->
  <polygon points="50,160 55,180 70,180 60,190 65,205 50,195 35,205 40,190 30,180 45,180" stroke="#FFC302" fill="transparent" stroke-width="5"/>
  <!--路径 -->
  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="#9B7B56" stroke-width="5"/>
</svg>

其他重要元素

:svg的根元素，并且可以相互嵌套；
:用来将SVG中的元素进行分组操作，分组后可以看成一个单独的形状，统一进行转换，同时g元素的样式可以被子元素继承，但是它没有x,y属性，不过可以通过transform来移动它
:用于定义在SVG中可重用的元素，def的元素不会直接显示出来，可以通过use元素来引用
:通过它来复用def元素，也包括,元素，使即可调用
:可以用它来实现word中的那种“艺术字”，很神奇的一个功能
:用它可以在SVG中嵌套对应的图片，并可以在图片上和周围做对应的处理

样式

可以类比于在切页面过程中，我们需要将我们画好的框框进行描边，填色，有时候还要加入渐变效果，转换，裁剪…

轮廓-stroke

stroke用于设置绘制对象线条的颜色

stroke-width: 设置轮廓的宽度
stroke-linecap：设置轮廓结尾处的渲染方式，value如下
- butt-直接一刀切
- square-保留一点切断
- round-圆弧切断
stroke-linejoin：用于设置两条线之间的连接方式，value如下
- miter-尖角连接
- round-圆弧连接
- bevel-切断连接
stroke-opacity：用于设置描边的不透明度
stroke-dasharray：用于使用虚线呈现SVG形状的描边，需要提供一个数组来描述，定义破折号和空格的长度
stroke-dashoffset：用于设置虚线模式中的开始点

填充-fill

fill用来描述SVG对象内部的颜色，除此还有如下两个属性

fill-opacity：用于设置填充颜色的不透明度
fill-rule：用于设置填充的规则，value如下
- nonzero：从一个点往任何方向上绘制一条射线，形状中的路径每次穿过此射线，如果路径从左到右穿过射线，则计数器加1，如果路径从右到左穿过射线，则计数器减1。计数器总数为0时候，则该点被认为在路径外。如果计数器非0，则该点被认为在路径内
- evenodd：从一个点往任何方向上绘制一条射线。每次路径穿过射线，计数器加1。如果总数是偶数，则点在外部。如果总计数为奇数，点在形状内

变换-transform
此属性和css3的transform相类似，有translate、rotate、scale、skew(skewX和skew函数使x轴和y轴倾斜)、matrix(矩阵变换，请联想大学线性代数 ???)这些变换，同时可以将它们组合进行变换

此外还有渐变、遮罩、裁剪等属性，详细请参考：linearGradient，mask，clipPath

动画

在SVG中的动画元素主要分成如下4类，同时也可以自由组合

：用于设置延迟，譬如设置5s后元素位置颜色变化，但是此元素没有动画效果
：基础动画属性，用于实现单属性的动画过渡效果
：实现transform变换动画效果，可以类比css3中的transform
：实现路径动画效果，让元素沿着对于path运动

有了元素以后还需要有对应的属性用来表示动画的特征，譬如：要动画的元素属性名称，起始值，结束值，变化值，开始时间，结束时间，重复次数，动画速度曲线函数等等

SVG - 图5

<svg width="800" height="250">
    <!--setj间隔3s向下走到cy为160地点-->
    <circle cx="80" cy="50" r="20" stroke="green" fill="#C3413D" stroke-width="5">
        <set attributeName="cy" to="160" begin="3s"></set>
    </circle>
<!-- animate设置动画并循环-->
    <circle cx="200" cy="50" r="40" stroke="#FFC302" fill="#635147" stroke-width="5">
        <animate attributeName="cy" from="160" to="60" begin="0s" dur="2s" repeatCount="indefinite"></animate>
    </circle>
<!--   animateTransform设置放大1.6倍并循环-->
    <circle cx="320" cy="50" r="40" stroke="#C3413D" fill="#FFF2C8" stroke-width="5">
        <animateTransform attributeName="transform" begin="0s" dur="3s" type="scale" from="1" to="1.6" repeatCount="indefinite"></animateTransform>
    </circle>
  <!--animateMotion设置路径动画-->
  <g transform="translate(500,60)">
    <def>
      <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110" stroke="#9B7B56" stroke-width="2" fill="none" id="theMotionPath" ></path>
    </def>
     <circle  r="5" fill="#FFC302">
        <animateMotion dur="6s" repeatCount="indefinite">
            <mpath xlink:href="#theMotionPath"></mpath>
        </animateMotion>
    </circle>
  </g>
</svg>