SVG路径描边动画效果的实现

SVG路径描边动画效果

理解SVG坐标系和变换：视窗,viewBox和preserveAspectRatio部分
参考自: http://www.w3cplus.com/html5/svg-coordinate-systems.html © w3cplus.com

先来放一个自己写的效果：

是不是很酷！！！

一、先看下svg几个属性：

1.`stroke:none | currentColor | <color>`(描边颜色)

none:        没有颜色
<color>:     常规的颜色值。RGBA, HSBA都支持。
currentColor:可以让路径绘制的文字直接继承父标签的color颜色值。

stroke-width 表示描边的粗细。

stroke-linecap 表示描边端点表现方式。可用值有：butt, round, square, inherit.

stroke-linejoin 表示描边转角的表现方式。可用值有：miter, round, bevel, inherit.

stroke-miterlimit 表示描边相交（锐角）的表现方式。默认大小是4.

stroke-dasharray 表示虚线描边。可选值为：none, <dasharray>, inherit. none表示不是虚线；
<dasharray>为一个逗号或空格分隔的数值列表。表示各个虚线段的长度。可以是固定的长度值，也可以是百分比值；
inherit表继承。

stroke-dashoffset 表示虚线的起始偏移。可选值为：<percentage>, <length>, inherit. 百分比值，长度值，继承。

stroke-opacity 表示描边透明度。默认是1.

2.SVG坐标系和变换：viewport,viewBox和preserveAspectRatio

viewport：
你可以在最外层元素上使用width和height属性声明视窗尺寸
视窗的初始坐标原点(0,0)在视窗的左上角，X轴正向指向右，Y轴正向指向下，初始坐标系中的一个单位等于视窗中的一个”像素”。
viewBox：这个可以声明自己的用户坐标系。
viewBox属性接收四个参数值，包括：<min-x>, <min-y>, width 和 height。
<min-x> 和 <min-y> 值决定viewBox的左上角，width和height决定视窗的宽高。这里要注意视窗的宽高不一定和父<svg>元素的宽高一样。
preserveAspectRatio：
当视窗的宽高比和用户坐标宽高比不同时就会使得svg发生形变，而preserveAspectRatio属性就是强制统一缩放比来保持图形的宽高比。
preserveAspectRatio = defer? <align> <meetOrSlice>?
– defer声明是可选的，并且只有当你在上添加preserveAspectRatio才被用到。在svg中显然没啥用。
– align参数声明是否强制统一放缩，如果是，对齐方法会在viewBox的宽高比不符合viewport的宽高比的情况下生效。
如果align值设为none，图形不再保持宽高比而会缩放来适应视窗。
– meetOrSlice也是可选的，默认值为meet。这个属性声明整个viewBox在视窗中是否可见。如果是，它和align参数通过一个或多个空格分隔。

3.SVG—>text标签

有x,y,dx,dy,rotate,textLength,lengthAdjust 这些属性

x,y表示文本的横纵坐标。
dx,dy表示移动的横纵坐标。
rotate表示旋转的度数。
text-anchor：设置文本排列属性 start|middle|end|inherit

二、动画要点：stroke-dasharray和stroke-dashoffset以及CSS3

stroke-dasharray: 虚线的疏密程度

stroke-dashoffset: 偏移

@keyframes stroke {
100% {
stroke-dashoffset: -400; } }

设置好stroke-dasharray，通过改变stroke-dashoffset来实现动画，思路很简单，就看你的想象力了。

六、路径的长度
如果想知道路径，或线条的准确长度。可能需要借助JavaScript，类似下面的代码：

var path = document.querySelector('path');
var length = path.getTotalLength();

SVG路径描边动画效果的实现相关推荐

纯CSS实现帅气的SVG路径描边动画效果
一.应该人人皆会的基础技术简而言之,就是让SVG的描边像是有人绘制一样的动画效果. 国外很多相关介绍的文章,来看看一些效果gif吧~ 纯CSS实现帅气的SVG路径描边动画效果纯CSS实现帅气的SV ...
css图像描边,纯CSS实现帅气的SVG路径描边动画效果
一.应该人人皆会的基础技术简而言之,就是让SVG的描边像是有人绘制一样的动画效果. 国外很多相关介绍的文章,来看看一些效果gif吧~ 我至少看到了4篇外文对此技术介绍(参见文末参考文章),觉得挺有意 ...
SVG路径描边动画效果
一.效果简而言之,就是让SVG的描边像是有人绘制一样的动画效果. 三.必知的基础知识 SVG中有个比较重要的属性分支,stroke :"描边". 1,stroke 描边颜色 no ...
纯CSS实现SVG路径描边动画效果
SVG中有一个比较重要度属性,stroke.stroke有很多兄弟属性: 1)stroke:线的颜色: 2)stroke-width:线的宽度: 3)stroke-linecap:线的端点,可用值有b ...
python animation path_帅气的SVG路径描边动画 (path animation) 实战应用
这是我的一个关于SVG的应用的技术分享网站svgtrick.com,会同步一些文章到这里来,更多关于SVG技术应用可以去网站看看. 要是觉得文章还不错的话,可以多多推荐哦. 今天这篇文章来聊聊SVG路 ...
使用snap.svg实现svg路径描边动画
使用snap.svg实现svg路径描边动画一,snap.svg插件在近几天,突然接到一个需求,内容是要在网页上写一个路径的动画,还需要可以随意控制动画的速度,开始于结束,本来是一个图片可以解决的问 ...
anime.js 实战：实现一个带有描边动画效果的复选框...
在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用.正确使用动画,不但可以有助于用户理解交互的作用,还可以大大提高网页应用的魅力和使用体验.并且在现在的网页开发中,动画已经成为了一个设计的 ...
SVG滤镜波浪动画效果
今天给大家分享一个用SVG实现的滤镜波浪动画效果,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. <!DOCTYPE html> <html lang="en&quo ...
SVG网页波浪动画效果背景
给大家分享一个SVG网页波浪动画效果背景 CSS部分 <style> .body { min-height: 100vh; display: -webkit-box; display: f ...

SVG路径描边动画效果的实现

SVG路径描边动画效果

一、先看下svg几个属性：

1.`stroke:none | currentColor | <color>`(描边颜色)

2.SVG坐标系和变换：viewport,viewBox和preserveAspectRatio

3.SVG—>text标签

有x,y,dx,dy,rotate,textLength,lengthAdjust 这些属性

二、动画要点：stroke-dasharray和stroke-dashoffset以及CSS3

SVG路径描边动画效果的实现相关推荐

最新文章

热门文章

SVG路径描边动画效果的实现

SVG路径描边动画效果

一、先看下svg几个属性：

1.stroke:none | currentColor | <color>(描边颜色)

2.SVG坐标系和变换：viewport,viewBox和preserveAspectRatio

3.SVG—>text标签

有x,y,dx,dy,rotate,textLength,lengthAdjust 这些属性

二、动画要点：stroke-dasharray和stroke-dashoffset以及CSS3

SVG路径描边动画效果的实现相关推荐

最新文章

热门文章

1.`stroke:none | currentColor | <color>`(描边颜色)