SVG 是使用XML来描述二维图形和绘图程序的语言。虽然svg已经诞生多年，但鉴于其浏览器兼容性、设计维护成本等原因，在过去的网页应用中非常有限，但随着技术的革新，预计未来SVG在国内网站中的使用会逐渐增加。本次以以下案例来简单探讨svg在网页中应用。
一、案例需求：
1、环形虚线相互逆向转动。
2、圆球围绕实线顺时针旋转文字。

3、当鼠标移动到圆形区域时，文字动态写入。

二、案例用到的元素标签
1、circle
标签可用来创建一个圆。
2、path
标签用来定义路径。
三、案例用到的stroke-dasharray和stroke-dashoffset属性介绍
1、stroke-dasharray（虚线描边）。
（1）用于创建虚线。
（2）值参是数组。
（3）值参之间用逗号或者空白隔开，它指定实线和空白线段的长度。
（4） 当值参为一个数时，表示实线长度和空白线段长度相同。
（5）值参是循环重复的。
（6）值参可以是固定的长度值，也可以是百分比值。
（7）举例：stroke-dasharray="20"，stroke-dasharray="20,10,5"等
2、stroke-dashoffset（虚线的起始偏移）
（1）值参表示相对于起始点偏移的长度。
（2）值参为正数，左移动，反之右移。
（3）值参可以是固定的长度值，也可以是百分比值。
四、制作步骤：
1、写一个SVG空间区块，大小为400x400
2、根据SVG path标签参数勾画“动易”文字，并居中显示。
3、 结合stroke-dashoffset属性，制作文字动态写入效果。

4、400x400 SVG增加父元素，并使其定位布局，设置其边块为实线。

5、写一个SVG空间区块，大小为500x500，并使其绝对定位布局，使其层级值为负。
6、根据SVG circle标签分别画三个圆形，第一个圆圈填充颜色，其余2个圆形不填充颜色，虚线显示
7、根据窗口设置圆形半径分别为10、70、90。
8、结合transform及animation对圆形制作环绕和旋转效果。

效果

<div class="PEbox">
    <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" class="PE" viewBox="100 100 280 100">
        <g>
            <path id="svg1" d="m160.30032,116.96914l35.56664,-0.7514l-1.50282,10.77018l-36.31804,0.75141l2.25422,-10.77018z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#336458" fill="#fff" />
            <path id="svg2" d="m208.13994,119.7243l1.75329,-4.50844l12.52346,0l-0.25047,4.00751l18.28426,0.75141l-11.27112,69.37998l-3.50657,3.00563l-17.28238,0.25047l1.00188,-9.01689l6.01126,-1.00188l8.76642,-51.09573l-5.51032,0l-16.53097,58.35934l-4.00751,2.25422l-13.0244,0.25047l0.50094,-9.01689l4.50845,-0.50094l15.52909,-51.59667l-8.01502,0.50094l1.25235,-11.27112l9.26735,-0.75141z"
            fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#336458" fill="#fff" />
            <path id="svg3" d="m155.04046,138.75996l36.31805,0l-2.00375,10.26924l-14.27675,1.00188l-14.77769,31.30866l-0.75141,1.50282l10.77018,0l4.00751,-13.52534l11.52159,-0.75141l-3.2561,20.03754l-3.00563,3.50657l-34.31429,0l1.25235,-10.01877l15.52909,-32.31053l-9.01689,-0.75141l2.00375,-10.26924z"
            fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#336458" fill="#fff" />
            <path id="svg4" d="m261.23942,115.46632l78.64736,-0.25047l-5.76079,34.31429l-5.51032,4.25798l-53.09948,0.25047l-2.00375,2.75516l59.36121,0.50094l-4.75892,30.55725l-4.00751,4.50845l-21.54036,0.25047l1.50282,-8.26549l10.77018,-0.25047l3.75704,-18.03379l-51.84714,0.25047l-6.26173,5.25985l-12.77393,0.75141l1.50282,-9.51783l3.50657,-0.25047l7.51408,-8.76642l-6.5122,-0.50094l7.51407,-37.82086z"
            fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#336458" fill="#fff" />
            <path id="svg5" d="m273.01147,125.73556l49.59292,-0.25047l-0.75141,5.00939l-49.59291,0.25047l0.7514,-5.00939z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#336458" fill="#fff" />
            <path id="svg6" d="m270.00584,140.26278l50.5948,-0.7514l-1.50282,5.76079l-49.34244,-0.25047l0.25046,-4.75892z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#336458" fill="#fff" />
            <path id="svg7" d="m280.77602,183.59396l11.77207,-12.27299l16.53097,-0.25047l-20.78895,20.78895l-16.03003,0.50094l1.25235,-8.26549l7.2636,-0.50095z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#336458" fill="#fff" />
            <path id="svg8" d="m267.75162,170.56956l14.27676,0.25048l-19.78707,20.53848l-18.28426,0l1.00188,-7.51408l10.01877,-0.50094l12.77392,-12.77394z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#336458" fill="#fff" />
        </g>
    </svg>
    <svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" class="PE-B" viewBox="-100 -100 200 200">
        <circle cx="0" cy="0" r="10" fill="#336458" class="c1" />
        <circle cx="0" cy="0" r="70" fill="none" class="c2" stroke-dasharray="2" stroke="#7aa297" stroke-width="1" />
        <circle cx="0" cy="0" r="90" fill="none" class="c3" stroke-dasharray="2" stroke="#7aa297" stroke-width="1" />
    </svg>
</div>

<style>
/** 文字动态写入效果**/
.PEbox {
  margin: 30px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  margin: 0 auto;
  text-align: center;
  position: relative;
  border: 2px solid #336458;
}
.PEbox .PE:hover {
  stroke-dasharray: 1500;
  animation: PE 8s linear infinite;
}
@keyframes PE {
  0% {
    stroke-dashoffset: 1500;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
/** 环绕及旋转效果**/
.PEbox .PE-B {
  position: absolute;
  left: -50px;
  top: -50px;
  border-radius: 50%;
  z-index: -1;
}
.PEbox .PE-B .c1 {
  animation: orbits 5s linear infinite;
}
@keyframes orbits {
  from {
    transform: rotate(0deg) translateX(80px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(80px) rotate(-360deg);
  }
}
.PEbox .PE-B .c2 {  
  animation: spin 30s linear 0s infinite both;
}
.PEbox .PE-B .c3 {  
  animation: spin-B 30s linear 0s infinite both;
}
@keyframes spin {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes spin-B {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>