用SVG制作酷炫动态图标的方法
发布时间:2020-09-14 14:56:39
来源:亿速云
阅读:160
作者:小新
用SVG制作酷炫动态图标的方法?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
一、基本图形元素
svg有一些预定义的形状元素:矩形,圆形,椭圆,直线,折线,多边形,路径和文本。
Try SVG
二、样式与效果
svg元素的样式可以写成标签的属性,也可以写在style里面。下面是一些主要的样式属性:
stroke: 笔触颜色
stroke-width:笔触宽度
stroke-opacity:笔触的透明度
fill:填充色,即background
fill-opacity:填充色的透明度
transform:图形变换,类似css3 transform
svg还支持很多滤镜效果,能做渐变、阴影、模糊、图像混合等等。不需要了解那么多,例如要画几个彩色圆圈,用circle 配合fill 即可。
注意:transform 默认以svg左上角为基点,而不是圆心或其他中心。左上角是svg坐标系原点。了解transform和坐标系统,可以参考 这里。
三、辅助元素
svg有几个辅助元素:。它们不代表具体形状,而是帮助进行