小编给大家分享一下SVG动态图标是怎么实现的,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
%201%20&%20lt;%20!——viewBox定义画布大小宽/高定义实际大小——比;
2%20&%20lt;%20svg%20xmlns=癶ttp://www.w3.org/2000/svg"version=?.1”;宽度=?00”;身高=?00”;viewBox=?%200%20300%20300,比;
3.
4%20&%20lt;%20!——直线(x1,%20y1)与(x2,%20y2)为两点坐标——比;
x1=5%20&%20lt;行“0”;日元=?”;x2=?50”;y2=?0”;/比;
6
7%20&%20lt;%20!——多边形通过多个点的坐标形成封闭图形——比;
8%20&%20lt;多边形点=?%205%20100100%2050200“;/比;
9
10%20&%20lt;%20!——矩形(x,%20y)为左上角起始点——比;
11%20&%20lt;矩形x=?00”;y=?00”;宽度=?20”;身高=?00”;/比;
12
13%20&%20lt;%20!cy%20-圆形(cx)圆心点r半径——比;
14%20&%20lt;圆cx=?00”;cy=?0”;r=?0”;中风=癰lack"/比;
15
16%20&%20lt;%20!——文本(x,%20y)左下角坐标——比;
17%20&%20lt;文本x=?”;y=?0”;风格=白痔宕笮?16%20px;粗细:bold"在试着SVG%2018%2019%20&%20lt;/svg>%20%20
二、样式与效果
%20%20svg元素的样式可以写成标签的属性,也可以写在风格里面。下面是一些主要的样式属性:
%20中风:笔触颜色
%20%20<李>%20笔划宽度:笔触宽度
%20%20<李>%20%20stroke-opacity:笔触的透明度
%20%20<李>%20填充:填充色,即背景
%20%20<李>%20填充不透明度:填充色的透明度
%20%20<李>%20变换:图形变换,类似css3转换
%20%20%20%20svg还支持很多滤镜效果,能做渐变,阴影,模糊,图像混合等等。不需要了解那么多,例如要画几个彩色圆圈,用圆配合填补即可。
%20注意:变换默认以svg左上角为基点,而不是圆心或其他中心。左上角是svg坐标系原点了。解变换和坐标系统,可以参考这里。
%20三、辅助元素
%20%20svg有几个辅助元素:&%20lt;%20g>&%20lt;%20defs>&%20lt;%20symbol>&%20lt;用gt;,它们不代表具体形状,而是帮助进行图形元素的分组管理,重复使用等。具体介绍可以参考这里。
%20%20&%20lt;%20g>,元素通常用来对相关图形元素进行分组,以便统一操作,比如旋转,缩放或者添加相关样式等。
%20%20<李>%20%20&%20lt;用gt;SVG,实现现有图形的重用,可以重用单个SVG图形元素,也可以重用&%20lt;%20g>%20&%20lt;%20defs>定义的组元素。
%20%20<李>%20%20&%20lt;%20defs>,内部定义的元素不会直接显示,可以不用事先定义样式,而是在使用&%20lt;用gt;实例化的时候再定义。
%20%20<李>%20%20&%20lt;%20symbol>,能够创建自己的视窗,兼具&%20lt;%20g>的分组功能和&%20lt;%20defs>初始不可见的特性。
%20%20%20对于上面提到基的变换点问题,可以通过嵌套&%20lt;%20g>标签并偏移&%20lt;%20g>的位置,进而重设基点。如下画出几个水平排列的圆圈,并设置不同的缩放尺寸,得到
1 & lt; svg宽度=?0 px"身高=?0 px"xmlns=癶ttp://www.w3.org/2000/svg"viewBox=? 0 100 100“;preserveAspectRatio=皒MidYMid"比; 2 & lt; g变换=胺?20 50)“比; 3 & lt;圆cx=?”;cy=?”;r=?”;填补=? e15b64"变换=肮婺?0.99275 - 0.99275)“;/比; 4 & lt;/g> 5 & lt; g变换=胺?40 50)“比; 6 & lt;圆残雪=?”;cy=?”;r=?”;填补=? f47e60"变换=肮婺?0.773605 - 0.773605)“;/比; 7 & lt;/g> 8 & lt; g变换=胺?60 50)“比; 9 & lt;圆cx=?”;cy=?”;r=?”;填补=? f8b26a"变换=肮婺?0.42525 - 0.42525)“;/比; 10 & lt;/g> 11 & lt; g变换=胺?0(80)“比; 12 & lt;圆cx=?”;cy=?”;r=?”;填补=? abbd81"变换=肮婺?0.113418 - 0.113418)“;/比; 13 & lt;/g> 14 & lt;/svg>SVG动态图标是怎么实现的
