SVG 绘制非完整渐变圆环

本文主要想谈一谈前端关于渐变圆环的制作，效果图如下：

此为圆环的静态图

注意：部分iphone 不支持css3旋转大于等于90度，故页面中所需旋转的均改为了89deg；

SVG有两种方式写渐变的：线性渐变linearGradient或放射性渐变radialGradient，但是却不能通过这两种方式实现 角度渐变 （当然，如果有人能实现角度渐变，非常欢迎推荐）

我是通过借助SVG能填充图片的功能实现，为实现上述渐变圆环，我的填充图如下：

填充图片

关于SVG如何给路径填充背景图在此就不再细说，可以查看教程，相关教程有很多

直接上代码：

如果是适配手机，需要等比例缩放，这就需要设置viewbox，表示svg的左上角坐标和宽高

             x="0"y="0"width="160"height="160">

其中的样式 定义如下：

.img-transform{

        transform:rotate(89deg);

        transform-origin:50%50%;

}

背景图已经定义完成，接下来就是如果绘制圆环并使用背景图了，代码如下：

stroke-dasharray： 指定短划线和缺口的长度，如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值

stroke-dashoffset：指定了dash模式到路径开始的距离，一般通过此值形成动画

其中的circle-transform 定义的是当前圆环所要旋转或位移的量，样式如下：

.circle-transform{

        transform:translate3d(-1px,-1px,0)rotate(-89deg);

        transform-origin:50%50%;

}

不管是图片或圆环的样式定义，都可以根据自己的需要去定义

到目前为止，圆环已成，如果需要添加动画效果，可参考以下代码

.mapSvgDraw{

// stroke-dasharray: 1000;

// stroke-dashoffset: 1000;

         -webkit-animation: mapSvgDraw1slinearboth;

          animation: mapSvgDraw1slinearboth;

}

@-webkit-keyframes mapSvgDraw {

        0%{}

        100%{

                 stroke-dashoffset:0;

         }

}

@keyframes mapSvgDraw{

          0%{}

          100%{

                   stroke-dashoffset:0;

           }

}

以上，即为所有代码，如有不懂，可查阅相关资料

参考文献：

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Patterns

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-dashoffset

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-dasharray

文档信息

版权声明：自由转载-非商用-非衍生-保持署名

发表日期：2017年3月13日