乐趣区

关于前端:初学svg

jiezi

初学 svg

svg（scalable vector graphics）可缩放矢量图形，应用 xml 格局来定义图像，svg 在放大或者扭转尺寸的状况下其图形品质不会有所损失 

<?xml version="1.0" standalone="no"?>
<!-- XML 指可扩大标记语言（EXtensible Markup Language）, 被设计为传输和存储数据，其焦点是数据的内容 -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  
<!-- 文档类型定义（DTD）可定义非法的 XML 文档构建模块。它应用一系列非法的元素来定义文档的构造。DTD 可被成行地申明于 XML 文档中，也可作为一个内部援用，在此是内部援用 -->
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>

demo 显示的是一个高 100，宽 300 的长方形

1.svg 形态
  • 矩形 <rect>

    width/height：矩形的宽高

    x/y：矩形的左侧和顶端间隔

    rx/ry：使矩形产生圆角

    style：定义 css 属性（fill 是填充色彩，stroke-width 是边框宽度，stroke 是边框色彩），属性之间用分号隔开

  • 圆形 <circle>

    cx/cy：圆点的 x / y 坐标，默认为（0,0）

    r：半径

    Tips: 没有宽高（有半径和圆点就能画进去了），style 属性都是通用的

  • 椭圆 <ellipse>

    cx/cy：圆点的 x / y 坐标，默认为（0,0）

    rx/ry：程度半径 / 垂直半径

  • 线 <line>

    x1/y1：线条开始的 xy

    x2/y2：线条完结的 xy

  • 折线 <polyline>

    创立仅仅蕴含直线的形态

    points：定义每个点的 x 和 y 坐标，用空格辨别

  • 多边形 <polygon>

    不少于三个点的图形

    points：定义多边形每个角的 x 和 y 坐标，用空格辨别

    e.g.points=”220,100 300,210 170,250″

  • 门路 <path>

    • M = moveto：须要挪动到的点的坐标（x y）
    • L = lineto：新地位的点（x y），生成上一个地位到以后地位的线段
    • H = horizontal lineto：平行线（x），一个参数，示意平移后的地位
    • V = vertical lineto：垂直线（y），一个参数，示意垂直平移后点的地位
    • C = curveto：三次贝塞尔曲线（x1 y1，x2 y2，x y）x1/y1 和 x2/y2 是两个控制点，x/ y 是锚点，终点的命令是 M（x y）
    • S = smooth curveto：简写的贝塞尔曲线，当一个点某一侧的控制点是它另一侧的控制点的对称（以放弃斜率不变（x2 y2, x y），放在 C 命令前面时，画进去是 C 的斜率一样的反向曲线，独自用时就会假如两个控制点都是 x2 y2
    • Q = quadratic Belzier curve：二次贝塞尔曲线（x1 y1, x y），只有一个控制点
    • T = smooth quadratic Belzier curveto：Q 命令的简写，跟在 Q 前面，只写一个起点就好，会主动推算出控制点，如果后面没有 Q，默认没有控制点，画进去是直线（x y）
    • A = elliptical Arc：椭圆弧，七个参数 (rx ry x-axis-rotation large-arc-flag sweep-flag x y)（太简单了有用到的时候再具体钻研好了）
    • Z = closepath：闭合曲线：从以后点画一条直线到终点，不辨别大小写，木有参数

      对应的命令大小写都能够，大写示意相对定位，小写示意绝对定位

2.svg 滤镜

fe 相干的属性，具体没咋钻研，用 <defs> 和 <filter> 来标识

所有互联网的 SVG 滤镜定义在 <defs> 元素中。<defs> 元素定义短并含有非凡元素（如滤镜）定义。

<filter> 标签用来定义 SVG 滤镜。<filter> 标签应用必须的 id 属性来定义向图形利用哪个滤镜

3. 突变

包含线性突变（linearGradient）和辐射突变（radialGradient），都要在 defs 的包裹下 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <defs>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);
      stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="url(#grad2)" font-size="45" font-family="Verdana" x="150" y="400">
  SVG</text>
</svg>
4. 动画

svg 动画的实现有两种形式，第一种是 svg+SMIL animation，第二种是配合 css 相干属性以及 css 动画实现

  • svg+SMIL（Synchronized Multimedia Integration Language（同步多媒体集成语言））

    1.animate

    蕴含属性：attributeName（进行动画的属性名称），attributeType（auto，CSS，XML，属性在哪个命名空间里，个别可不填），from，to，dur，repeatCount

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);
      stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </radialGradient>
    </defs>
  <rect width="100" height="100" fill="url(#grad2)">
    <animate attributeName="rx" values="50;0;50" dur="4s" repeatCount="indefinite" />
  </rect>
</svg>

    2.animateMotion

    定义了一个元素如何沿着静止门路进行挪动，必要时能够用 mpath 将 path 嵌入 

    <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="lightgrey" 
    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

  <circle r="5" fill="red">
    <animateMotion dur="10s" repeatCount="indefinite"
      path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  </circle>
</svg>

    <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path fill="none" id="path1"  stroke="lightgrey" 
    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  <circle r="5" fill="red">
    <animateMotion dur="10s" repeatCount="indefinite">
        <mpath xlink:href="#path1" />
      <!-- 能够防止反复写 path，然而要先申明 xmlns:xlink -->
      </animateMotion>
  </circle>
</svg>

    3.animateTransform

    变动了指标元素上的变形属性，使指标属性能够旋转，缩放，转换等等 

    <svg width="120" height="120"  viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink" >

    <polygon points="60,30 90,90 30,90">
        <animateTransform attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          from="0 60 70"
                          to="360 60 70"
                          dur="3s"
                          repeatCount="indefinite"/>
    </polygon>
</svg>
  • css 动画实现

    援用 css 来实现动画，这个和 css 动画差不多，

    在此拿填充属性 stroke-dasharray 进行举例，从虚线长为 0，距离一个圆周，突变到虚线为圆周长，距离一个圆周长，这样就能实现圆环的填充 

<hgroup class="circle-load">
    <svg width="240px" height="240px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <style>
.circle-load {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.circle-load-svg {
    stroke-dasharray: 0 570; 
    animation: rot 5s ease-out infinite;
}

@keyframes rot {
    100% {stroke-dasharray: 570 570;}
}

</style>
        <circle cx="110" cy="110" r="90" stroke-width="10" stroke="gainsboro" fill="none"></circle>
        <circle cx="110" cy="110" r="90" stroke-width="10" stroke="darkturquoise" fill="none" class="circle-load-svg"></circle>
    </svg>
</hgroup>
退出移动版