解析svg Web动效_网站前端开发_前端开发者

网站前端开发_前端开发者web开发

https://www.rokub.com

三看svg web动效CSS3动效玩腻了吗?没关系的,我们还有svg 。
Welikesmall是一个互联网品牌宣传代理,这是我见过的最喜欢使用svg 做动效的网页设计团队。
事实上,越来越多的网页动效达人选择在svg 的疆土上开辟动效的土壤,即便SMIL寿将终寝,事实上这反而将svg 动效推向了一个新的世界:CSS3Animation+svg 。(SMILisdead!LongliveSMIL!AGuidetoAlternativestoSMILFeatures)还记得我在久远的《以电影之眼看CSS3动画》中说道:“CSS3动画简直拥有了整个世界!”那么带上svg 的CSS3动画则已突破天际向着宇宙级的可能性前进(感觉给自己挖了一个无比巨大的坑,网页动画界可不敢再出新技术了[扶额])。
css与svg 的打通无疑将html代码的可读性又推上一个台阶,我们可以通过css控制svg 图形的尺寸、填色、边框色、过渡、移动变幻等相当实用的各种属性,除此之外,将图形分解的动画在这种条件下也变得相当简单。索引本文将讲到三个动效例子:动效来源:WLS-Adobe即将聊到的svg 标签:<path><g><symbol><defs><use><clipPath><mask>以及属性:viewBoxpreserveAspectRatiofillstrokestroke-dasharraystroke-dashoffsetdclip-pathmask从一个简单的例子说起要做出这样的效果,第一步是将图形画出来。
徒手敲代码这种事还是留给图形工具来做,但是,为了更好地控制与制作动效,咱至少要做到读懂svg 代码。svg 的基本格式是使用<svg >标签对代码进行包裹,可直接将代码段插入html中,也可以保存成svg 文件之后使用img、object进行引用。<svg width=”100%”
height=”100%”><!–svg markuphere.–></svg >123<svg width=”100%”height=”100%”><!–svg markuphere.–></svg >由于交互动效所需,这里仅介绍直接使用svg 标签的情况。
<
svg width=”90″
height=”13″
viewBox=”0089.412.4″><linex1=”0″
y1=”6.2″
x2=”59.6″
y2=”6.2″></line><linex1=”54.7″y1=”0.7″x2=”60.5″y2=”6.5″></line><linex1=”54.7″
y1=”11.7″
x2=”60.5″
y2=”5.8″></line></svg >12345<svg width=”90″
height=”13″
viewBox=”0089.412.4″><linex1=”0″
y1=”6.2″
x2=”59.6″
y2=”6.2″></line><linex1=”54.7″y1=”0.7″x2=”60.5″y2=”6.5″></line><linex1=”54.7″
y1=”11.7″
x2=”60.5″
y2=”5.8″></line></svg >这是箭头的代码段,使用了最简单的线条进行绘制。可以看到其中包裹了许多坐标样的属性值。
有坐标就意味着有坐标系。
svg 的坐标系存在三个概念:视窗、视窗坐标系、用户坐标系。
视窗坐标系与用户坐标系属于svg 的两种坐标系统,默认情况下这两个坐标系的点是一一对应的。
web其他坐标系相同,原点位于视窗的左上角,x轴水平向右,y轴垂直向下。(图片来源:MDN-svg Tutorial-Positions)svg 的位置、大小与文档流中的块级元素相同,都可由css进行控制。
视窗即为在页面中svg 设定的尺寸可见部分,默认情况下svg 超出隐藏。
svg 能通过viewBox属性就完成图形的位移与缩放。
viewBox属性值的格式为(x0,y0,u_width,u_height),每个值之间用逗号或者空格隔开,它们共同确定了视窗显示的区域:视窗左上角坐标设为(x0,y0)、视窗的宽设为u_width,高为u_height;这个变换对整个视窗都起作用。下图展示了当viewBox尺寸与svg 尺寸相同、放大一倍、缩小一倍时的表现:一句话总结,就是用户坐标系需要以某种方式铺满整个视窗。
默认的方式是以最短边为准铺满,也就是类似background-size中的cover值。
通过preserveAspectRatio属性你可以控制用户坐标系的展开方式与位置,完美满足你的各种需求。
属性的语法如下:preserveAspectRatio=”[defer]<align>[<meetOrSlice>]”
注意3个参数之间需要使用空格隔开。defer:可选参数,只对image元素有效,如果image元素中preserveAspectRatio属性的值以defer开头,则意味着image元素使用引用图片的缩放比例,如果被引用的图片没有缩放比例,则忽略defer。
所有其他的元素都忽略这个字符串。
meetOrSlice:可选参数,可以去下列值:meet–默认值,统一缩放图形,让图形全部显示在viewport中。–默认值,统一缩放图形,让图形全部显示在viewport中。
slice–统一缩放图形,让图形充满viewport,超出的部分被剪裁掉。——引用来源《突袭HTML5之svg 2D入门6–坐标与变换》align:必选参数。
由两个名词组成。
下图诠释了各种填充的效果:(图片来源:7CoordinateSystems,TransformationsandUnits)在这一层面处理好图形的展示之后,剩下的所有变换,无论是translate、rotate还是opacity,我们都可以全权交给css来处理,并且可以将图形细化到形状或者路径的层面进行变换。
然而实际情况是,刚才的那段代码,放进codepen之后是什么也看不见的,原因就在于这个路径的绘制既没有填充颜色也没有描边。
填充——fillfill属性用于给形状填充颜色。
svg line{
fill:#000;/*填充黑色*/}123svg line{fill:#000;/*填充黑色*/
}
填充色的透明度通过fill-opacity设置。
然而我们发现,我们的箭头即使填充了颜色,还是什么也看不见,问题就出在我们绘制的时候使用了没有面积的line标签。
这个时候,就需要出动描边了。
描边——stroke这个stroke可得大书特书,因为光是这个stroke就能搞定80%的描线动效。
直接通过stroke设置描边色,我们就能立刻看到刚才的箭头了。
通过stroke-width则可以对描边的粗细进行修改。
svg line{
stroke:#000;stroke-width:1px;}1234svg line{stroke:#000;stroke-width:1px;
}
线的虚实:stroke-dasharray(敲黑板)王牌属性出现辣!这个属性的属性值是1到n个数字,多个数字由逗号隔开,css中的定义则由空格分开,每个数字定义了实线段的长度,分别是按照绘制、不绘制这个顺序循环下去。
下面是设置了1个、2个、3个数字时虚线的描绘情况对比:stroke-dashoffset(敲黑板)这个也是重点属性!当我们将描边虚实设置成实线部分与图形描边长度相同时,我们是看不到空白段的部分的。
这时形状的描边就像完全描绘出来了一样。
这时我们使用这个属性,将虚线开始的位置稍微做一下移动,无论是往前移还是往后移,我们都能看到图形描边出现了一段空白,当这个移动形成一个连续的动作时,描线动效就这么不经意的出现了(蓦然回首)。
svg line{
stroke-dasharray:60;
stroke-dashoffset:60;
transition:stroke-dashoffsetease-in.5s;
}
svg :hoverline{
stroke-dashoffset:0;
}
123456789svg line{
stroke-dasharray:60;
stroke-dashoffset:60;
transition:stroke-dashoffsetease-in.5s;
};
svg :hoverline{
stroke-dashoffset:0;
}
再对头部做个延时处理,修改一下虚线移动的方向,动效看起来会更顺眼一些。
这个时候,svg 可以分路径编辑的优势就体现出来了。
对每个line添加一个类,我们就能对每条路径进行差异化处理(Codepen)。
<
svg width=”360″
height=”52″
viewBox=”0089.412.4″><lineclass=”arrow-line”
x1=”0″
y1=”6.2″
x2=”59.6″
y2=”6.2″></line><lineclass=”arrow-head”x1=”54.7″y1=”0.7″x2=”60.5″y2=”6.5″></line><lineclass=”arrow-head”
x1=”54.7″
y1=”11.7″
x2=”60.5″
y2=”5.8″></line></svg >12345<svg width=”360″
height=”52″
viewBox=”0089.412.4″><lineclass=”arrow-line”
x1=”0″
y1=”6.2″
x2=”59.6″
y2=”6.2″></line><lineclass=”arrow-head”x1=”54.7″y1=”0.7″x2=”60.5″y2=”6.5″></line><lineclass=”arrow-head”
x1=”54.7″
y1=”11.7″
x2=”60.5″
y2=”5.8″></line></svg >svg line{
fill:#000;stroke:#000;stroke-width:1px;
}.arrow-line{
stroke-dasharray:60;
stroke-dashoffset:60;
transition:stroke-dashoffsetease-in.5s.2s;
}.arrow-head{
stroke-dasharray:9;
stroke-dashoffset:-9;
transition:stroke-dashoffsetease-in.2s;
}
svg :hoverline{
stroke-dashoffset:0;
}
svg :hover.arrow-line{
transition:stroke-dashoffsetease-in.5s;
}
svg :hover.arrow-head{
transition:stroke-dashoffsetease-in.2s.5s;
}
123456789101112131415161718192021222324svg line{
fill:#000;stroke:#000;stroke-width:1px;
}.arrow-line{
stroke-dasharray:60;
stroke-dashoffset:60;
transition:stroke-dashoffsetease-in.5s.2s;
}.arrow-head{
stroke-dasharray:9;
stroke-dashoffset:-9;
transition:stroke-dashoffsetease-in.2s;
}
svg :hoverline{
stroke-dashoffset:0;
}
svg :hover.arrow-line{
transition:stroke-dashoffsetease-in.5s;
}
svg :hover.arrow-head{
transition:stroke-dashoffsetease-in.2s.5s;
}
了解了这两个重点属性,动效剩下的重担,就落在了dasharray与dashoffset值的计算上了。
这个步骤或许没有什么捷径,简单的直线、弧线之类的或许还能口算口算,其余的不规则图形也就只有多试这条傻路可走,如果你是图形高手就当我没说。
另外三个描边属性:stroke-linecap、stroke-linejoin、stroke-miterlimit由于暂时用不上惨遭抛弃,具体可参考MDN-svg Tutorial-FillsandStrokes,stroke-miterlimit详解svg 研究之路(16)-Stroke-miterlimit。
图形绘制箭头的绘制只用到了路径中最简单的直线路径line,svg 中还有矩形rect、圆形circle、椭圆ellipse、折线polyline、多边形polygon以及万能的路径path。
之所以将一些规整的图形单独出标签,是为了代码的可读性更强些,毕竟svg 的可读性已经没那么强了……规整图形的属性较好理解(具体可参考MDN-svg Tutorial-Path),这里深入讲解一下如何阅读路径path的代码。
绝对坐标绘制指令这组指令的参数代表的是绝对坐标。
假设当前画笔所在的位置为(x0,y0),则下面的绝对坐标指令代表的含义如下所示:移动画笔指令M,画直线指令:L,H,V,闭合指令Z都比较简单;下面重点看看绘制曲线的几个指令。
绘制圆弧指令:Arxryx-axis-rotationlarge-arc-flagsweep-flagxy用圆弧连接2个点比较复杂,情况也很多,所以这个命令有7个参数,分别控制曲线的的各个属性。
下面解释一下数值的含义:rx,ry是弧所在的椭圆的半长轴、半短轴长度,rx为x轴上的轴长,ry为y轴上的周长。
x-axis-rotation是此段弧的顺时针旋转角度,负数代表逆时针转动的角度。
large-arc-flag两个值:1或0。
1表示大角度弧线,0代表小角度弧线。
sweep-flag两个值:1或0。
1代表从起点到终点弧线绕中心顺时针方向,0代表逆时针方向。
x,y是弧终端坐标。
为了更好的理解圆弧的绘制,我们来试试手动画一下MDN上的范例:<svg width=”320px”
height=”320px”
viewBox=”00320320″><pathd=”M10315L110215A3050001162.55162.45L172.55152.45A3050-4501215.1109.9L31510″
stroke=”black”
fill=”green”
stroke-width=”2″
fill-opacity=”0.5″/></svg >12345678<svg width=”320px”height=”320px”viewBox=”00320320″><pathd=”M10315L110215A3050001162.55162.45L172.55152.45A3050-4501215.1109.9L31510″stroke=”black”fill=”green”stroke-width=”2″fill-opacity=”0.5″/></svg >首先是M和L指令:然后是A指令的绘制,在这一步可以看到large-arc-flag(大小弧)与sweep-flag(弧度方向)值的影响。
在本例中,弧度标记值为0,意味着选择小弧;弧度方向标记值为1,意味着选择起点到终点为顺时针方向的那条弧(别眨眼):接下来我们省略掉L指令的绘制,来看看下一个圆弧。
这个圆弧的旋转角度(x-axis-rotation)发生了变化,体会一下差异:看了这么久,是不是挺纳闷这么难看的东西为什么一定要读懂?其实也不是强求各位看官能成为脑补svg 图形的天才,只是大概读懂这些难看的数字,在做动画的时候才会心里有底手上有劲点,至少大概知道这条东西画出来是什么样,而后再针对它写写动效。
所以,我们继续看看图形界的万金油——贝塞尔曲线吧~!维基上有详细的贝塞尔曲线绘制公式与动图展示,这里就不做展开。
path中的贝塞尔曲线指令共有四个:C,S,Q,T。
svg 只提供了最高阶到三次的贝塞尔曲线绘制指令,事实上大部分绘图软件也是如此。
三次贝塞尔曲线:Cx1y1,x2y2,xy(或者cdx1,dy1,dx2,dy2,dxdy)三次贝塞尔曲线有两个控制点,就是(x1,y1)和(x2,y2),最后面(x,y)代表曲线的终点。
这个时候还是上动图比较省心。
以下面的代码段为例:123<svg width=“300”height=“100”viewBox=“006030”><pathd=“M1010C2020,4020,5010”stroke=“#000”fill=“transparent”></path></
svg >绘制过程如下:(手残,顺滑绘制过程请还是参考维基君。)借助PS中的钢笔工具根据辅助线能迅速画出路径,可以免去那抽象的计算过程。
简化版三次贝塞尔曲线:Sx2y2,xy(或者sdx2dy2,dxdy)很多时候,曲线不止一个弧,为了平滑过渡,第二个曲线的控制点常常是第一个曲线控制点在曲线另外一边的映射点。
这个时候可以使用这个简化版本。
这里要注意的是,如果S指令前面没有其他的S指令或C指令,这个时候会认为两个控制点是一样的,退化成二次贝塞尔曲线的样子;如果S指令是用在另外一个S指令或者C指令后面,这个时候后面这个S指令的第一个控制点会默认设置为前面的这个曲线的第二个控制点的一个映射点。——《突袭HTML5之svg 2D入门2–图形绘制》这里重点讲解一下S指令中每个点对应的位置。
同样借用MDN上的示例:
<
svg width=”190″
height=”160″><pathd=”M1080C4010,6510,9580S150150,18080″
stroke=”black”
fill=”transparent”/></svg >123<svg width=”190″height=”160″><pathd=”M1080C4010,6510,9580S150150,18080″stroke=”black”fill=”transparent”/></svg >二次贝塞尔曲线:Qx1y1,xy(或者qdx1dy1,dxdy)经历了三次贝塞尔曲线的洗礼,二次贝塞尔曲线看起来真是亲切。<
svg width=”190″
height=”160″><pathd=”M1080Q9510,18080″
stroke=”black”
fill=”transparent”/></svg >123<svg width=”190″height=”160″><pathd=”M1080Q9510,18080″stroke=”black”fill=”transparent”/></svg >注:PS中的钢笔工具绘制二次贝塞尔曲线只能通过三次贝塞尔曲线进行模拟,或许二次贝塞尔曲线最准确的绘制方法就是通过代码了吧。
这里有一个可视化Canvas绘制贝塞尔曲线的网站——CanvasQuadraticCurveExample,实现方式比svg 还复杂[抠鼻]。简化版二次贝塞尔曲线:Txy(或者tdxdy)与S指令类似,为了更顺滑的多弧曲线,T指令直接指定曲线终点,控制点自动计算。
同时,如果T指令只在上一个指令为Q或者T指令的情况下有效,否则当作L指令执行。终于把贝塞尔讲完了……第二个神奇的动效偷偷用一个箭头把svg 的填色、描边、路径都给讲完了,然而,svg 能用到的还不止这些。开玩笑,Web界的猪——浑身都是宝——可不是吹的。
首先,我们观察一下这个播放键的结构的实现方法(Codepen)(注:为了能直观地看到效果,我将.play-icon-blend的填充与描边改为了黑色,原例子中为白色):<
svg class=”play-icon-vector”
x=”0″
y=”0″
width=”50″
height=”50″
viewBox=”005050″><defs><circleid=”play-circle-template”
cx=”25″
cy=”25″
r=”25″></circle></defs><useclass=”play-icon-blend”
xlink:href=”#play-circle-template”
fill=”#000″
stroke=”#000″
stroke-width=”4px”></use><useclass=”play-icon-circle”xlink:href=”#play-circle-template”fill=”#fff”stroke=”#fff”stroke-width=”2px”></use><pathclass=”play-icon-polygon”
d=”M31.49,24.31a0.73,0.73,0,0,1,0,1.38l-8.27,5.64A0.74,0.74,0,0,1,22,30.64V19.36a0.74,0.74,0,0,1,1.22-.69Z”
fill=”#fff”></path></svg >123456789<svg class=”play-icon-vector”
x=”0″
y=”0″
width=”50″
height=”50″
viewBox=”005050″><defs><circleid=”play-circle-template”
cx=”25″
cy=”25″
r=”25″></circle></defs><useclass=”play-icon-blend”
xlink:href=”#play-circle-template”
fill=”#000″
stroke=”#000″
stroke-width=”4px”></use><useclass=”play-icon-circle”xlink:href=”#play-circle-template”fill=”#fff”stroke=”#fff”stroke-width=”2px”></use><pathclass=”play-icon-polygon”
d=”M31.49,24.31a0.73,0.73,0,0,1,0,1.38l-8.27,5.64A0.74,0.74,0,0,1,22,30.64V19.36a0.74,0.74,0,0,1,1.22-.69Z”
fill=”#fff”></path></svg >.play-icon-vector{
overflow:visible;
}.play-icon-circle,.play-icon-polygon{
mix-blend-mode:exclusion;
transition:opacity.3scubic-bezier(.08,.03,.22,.87);
}.play-icon-blend{
transform-origin:center;
transform:scale(0);
transition:transform.25scubic-bezier(.08,.03,.22,.87);
}.play-icon-vector:hover.play-icon-blend{
transform:scale(1.1);
}
12345678910111213141516.play-icon-vector{
overflow:visible;
}.play-icon-circle,.play-icon-polygon{
mix-blend-mode:exclusion;
transition:opacity.3scubic-bezier(.08,.03,.22,.87);
}.play-icon-blend{
transform-origin:center;
transform:scale(0);
transition:transform.25scubic-bezier(.08,.03,.22,.87);
}.play-icon-vector:hover.play-icon-blend{
transform:scale(1.1);
}
这里顺带用了一下下CSS3的滤镜mix-blend-mode(svg 也有滤镜功能,这里不做介绍,感兴趣的可以移步《突袭HTML5之svg 2D入门10–滤镜》)。
这里用到的值exclusion的效果,是在叠加区域只显示亮色,下面是使用了同样滤镜的图片与正常图片的对比图,感受一下:图片来源:css-Tricks-mix-blend-mode可以看到代码里还出现了一些了不得的标签——<defs>、<use>。
接下来,我们就来了解一下它们。
首先我们知道,通过中间圆圈的缩放,再加上外围圆圈与中心三角的叠加效果,完成了这个hover效果。
也就意味着,圆圈在这里用到两次。
这个时候就可以使用svg 里路径的重用与引用功能。
svg 的重用与引用三种集合标签:<g>、<symbol>、<defs>,都是用于将零散的图形组合成一个整体。区别在于:<g>:组合标签。
添加id属性来作为引用的钩子,可在<g>标签上设置这组元素的相关属性(填色、描边等等)。:组合标签。
添加属性来作为引用的钩子,可在标签上设置这组元素的相关属性(填色、描边等等)。<symbol>:模板标签。
与<g>标签一样,通过id进行引用。
不同点在于,symbol元素本身不会被渲染;symbol元素拥有属性viewBox和preserveAspectRatio,这些允许symbol缩放图形。:模板标签。与标签一样,通过进行引用。
不同点在于,元素本身不会被渲染;元素拥有属性和,这些允许缩放图形。<defs>:定义标签。不仅仅是图形对象的合集,还可以是渐变效果、蒙版、滤镜等等,设置好id,在对应的属性(例如渐变就是fill、蒙版就是mask、滤镜就是filter)中引用即可,引用格式为“url(#id)”。具体例子参看《svg 研究之路(18)–再談defs》。更详细的区别见《突袭HTML5之svg 2D入门7–重用与引用》。以上三种集合的引用统一使用<use>标签。xlink:href属性指定引用的id。
use元素的作用过程就相当于把被引用的对象深拷贝一份到独立的非公开的DOM树中;这棵树的父节点是use元素。虽然是非公开的DOM节点,但是本质上还是DOM节点,所以被引用对象的所有属性值、动画、事件、CSS的相关设置等都会拷贝多来并都还是会起作用,而且这些节点也会继承use元素和use祖先的相关属性(注意引用元素是深拷贝,这些拷贝过来的元素与原来的元素已经无关系了,所以这里不会继承被引用元素祖先节点的属性),如果这些节点本身有相关(CSS)属性,还会覆盖继承来的属性,这些与普通的DOM节点是一致的,所以对use元素使用“visibility:hidden”时要小心,并不一定会起作用。但是由于这部分节点是非公开的,在DOM操作中,也只能看到use元素,所以也只能操作到use元素。在svg Sprite中,<use>的使用比较猖狂(《拥抱Web设计新趋势:svg Sprites实践应用》,同时也提到了svg 的兼容情况),而当svg 图形代码与引用部分分离开时,想针对图形中的某一部分进行处理就会显得特别麻烦(只能看到use结点),这个时候,打开shadowDOM的显示,包你一览无余(具体操作方法见《神奇的ShadowDOM》)。打开了shadowDOM显示的use标签下面就来看一个非图形引用的例子。在前面我们知道了,如果要描边动效,那修改stroke-dashoffset就可以达到效果。然而这种方法本身就是利用了虚线的hack,如果我们想要做一个虚线的描线动效呢?比如:这个时候stroke-dasharray与stroke-offset的合作是无法完成的,因为他俩动起来本身就是虚线在移动。所以我们需要换个思路,描线动画还是那个描线动画,只是虚线的绘制需要使用另一个hack——蒙版。蒙版svg 中的蒙版有两种——剪裁cliping<clipPath>与遮罩mask<mask>,都需要在<defs>中定义,然后通过对应的属性进行引用。<
svg ><defs><!–剪裁的定义–><clipPathid=”cliping”>…</clipPath><!–遮罩的定义–><maskid=”mask”>…</mask></defs><!–剪裁的引用–><circleclip-path=”url(#cliping)”></circle><!–遮罩的引用–><circleclip-path=”url(#mask)”></circle></svg >12345678910111213<svg ><defs><!–剪裁的定义–><clipPathid=”cliping”>…</clipPath><!–遮罩的定义–><maskid=”mask”>…</mask></defs><!–剪裁的引用–><circleclip-path=”url(#cliping)”></circle><!–遮罩的引用–><circleclip-path=”url(#mask)”></circle></svg >注:以上代码为了直观体现两者的使用方法,已剔除其余不相干代码,不可直接运行。剪裁与遮罩的区别在于,剪裁是按照定义的形状界限分明地进行图像的展示与隐藏:而遮罩相较于剪裁,多了渐变显示图像的功能,只要在<mask>中包裹渐变的定义即可。
遮罩的展示策略是:因此遮罩的功能其实是包含剪裁的,当遮罩使用的是纯黑的图像时,功能等同于剪裁。虚线的描线动效结合剪裁或者遮罩即可以完成(Codepen):<
svg width=”300″
height=”100″
viewBox=”00300100″><defs><clipPathid=”dash”
class=”dash”><rectx=”0″
y=”20″
width=”10″
height=”34″></rect><rectx=”20″y=”20″width=”10″height=”34″></rect><rectx=”40″
y=”20″
width=”10″
height=”34″></rect><rectx=”60″y=”20″width=”10″height=”34″></rect><rectx=”80″
y=”20″
width=”10″
height=”34″></rect></clipPath><maskid=”mask-dash”
class=”mask_dash”><rectx=”0″
y=”20″
width=”10″
height=”34″></rect><rectx=”20″y=”20″width=”10″height=”34″></rect><rectx=”40″
y=”20″
width=”10″
height=”34″></rect><rectx=”60″y=”20″width=”10″height=”34″></rect><rectx=”80″
y=”20″
width=”10″
height=”34″></rect></mask></defs><gclip-path=”url(#dash)”><lineclass=”line”x1=”0″y1=”28″x2=”100″y2=”28″></line></g><gmask=”url(#mask-dash)”><rectx=”0″y=”36″width=”100″height=”8″fill=”#eee”></rect><lineclass=”line”
x1=”0″
y1=”40″
x2=”100″
y2=”40″></line></g></svg >1234567891011121314151617181920212223242526<svg width=”300″height=”100″viewBox=”00300100″><defs><clipPathid=”dash”class=”dash”><rectx=”0″y=”20″width=”10″height=”34″></rect><rectx=”20″
y=”20″
width=”10″
height=”34″></rect><rectx=”40″y=”20″width=”10″height=”34″></rect><rectx=”60″
y=”20″
width=”10″
height=”34″></rect><rectx=”80″y=”20″width=”10″height=”34″></rect></clipPath><maskid=”mask-dash”class=”mask_dash”><rectx=”0″y=”20″width=”10″height=”34″></rect><rectx=”20″
y=”20″
width=”10″
height=”34″></rect><rectx=”40″y=”20″width=”10″height=”34″></rect><rectx=”60″
y=”20″
width=”10″
height=”34″></rect><rectx=”80″y=”20″width=”10″height=”34″></rect></mask></defs><gclip-path=”url(#dash)”><lineclass=”line”
x1=”0″
y1=”28″
x2=”100″
y2=”28″></line></g><gmask=”url(#mask-dash)”><rectx=”0″
y=”36″
width=”100″
height=”8″
fill=”#eee”></rect><lineclass=”line”x1=”0″y1=”40″x2=”100″y2=”40″></line></g></svg >.mask_dashrect{
fill:#fff;
}.line{
stroke:#000;stroke-width:8px;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffsetease-in.5s;}svg :hover.line{stroke-dashoffset:0;}12345678910111213.mask_dashrect{fill:#fff;
}.line{
stroke:#000;stroke-width:8px;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffsetease-in.5s;}svg :hover.line{stroke-dashoffset:0;}注意到上方使用了遮罩的集合里多了一个方形图像,是因为遮罩对于图形尺寸的要求更加严苛,line在它的眼里不是东西,不提供任何效果支持,但是一旦加个方形垫背,line就被接受了[翻白眼]。
所以涉及到切割的蒙版,请尽量使用clipPath。总结写到这里,阿婆主气数已尽,svg 是个深坑,这里也只能借着三个例子扯扯若干特性,等下回心情好了,阿婆主再拎几个出来说说(也是任性,人的svg 笔记都是一个属性一篇的)。下面我们来给这篇凌乱的文章做个梳理:今天我们实现了三个动效——箭头描线动效播放按钮滤镜动效虚线描线动效动效来源于WLS-Adobe聊到了svg 的几个标签<path><g><symbol><defs><use><clipPath><mask>以及属性viewBoxpreserveAspectRatiofillstrokestroke-dasharraystroke-dashoffsetdclip-pathmask动效实现对应的关键点箭头——stroke-dasharray、stroke-dashoffset播放按钮——<defs>、<use>虚线——<clipPath>、<mask>、clip-path、mask、stroke-dasharray、stroke-dashoffset。

网站前端开发_前端开发者丨web开发

https://www.rokub.com

» 本文来自:前端开发者 » 《解析svg Web动效_网站前端开发_前端开发者》
» 本文链接地址:https://www.rokub.com/2357.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!