svg代码大全(前端必备知识点)
前端必备知识点—SVG
基本内容
什么是SVG? 全称为Scalable Vector Graphics,是一种使用XML技术描述二维图形的语言,简单来说 - 矢量图(不失真)
SVG与HTML5的关系早在HTML5之前,存在SVG技术
SVG文件扩展名为".svg"
在HTML5出现之前,要在HTML页面中引入SVG文件
在HTML5出现之后,将SVG内容直接定义在HTML页面中
SVG的优势
可以使用文本编辑器创建和修改,SVG可被搜索、索引等,SVG绘制的图像不失真的
SVG与Canvas的区别SVG不依赖于分辨率,使用DOM或绑定事件,实现大型渲染区域的应用(地图类)
Canvas依赖于分辨率,不能使用DOM或绑定事件的,运行时以图片形式出现".jpg"
SVG的标准也是W3C定制的
设置样式1.通过元素的属性方式
fill - 设置填充样式
fill-opacity - 设置填充透明度
绘制图形矩形元素- <rect>元素
<rect x="" y="" width="" height="" rx="" ry="" />
x和y - 绘制矩形的左上角坐标值
width和height - 设置绘制矩形的宽度和高度
rx和xy - 设置圆角矩形
圆形元素 - <circle>元素
<circle cx="" cy="" r="" />
cx和cy - 绘制圆形的圆心坐标值
cx和cy不设置值的话,默认为(0,0)
r - 绘制圆形的半径
椭圆元素- <ellipse>元素
<ellipse cx="" cy="" rx="" ry="" />
cx和cy - 绘制椭圆的圆心坐标值
rx - 绘制椭圆的水平方向的半径
ry - 绘制椭圆的垂直方向的半径
注意:当rx和ry的值相同时,绘制的是圆形
线条元素- <line>元素
<line x1="" y1="" x2="" y2="" />
x1和y1 - 绘制直线的起点坐标值
x2和y2 - 绘制直线的终点坐标值
注意:绘制直线时,默认描边颜色为白色
折线元素 - <ployline>元素
<polyline points="" />
points - 折线的所有点坐标值,都设置在该属性中
注意:描边颜色默认为白色,填充颜色默认为黑色
多边形元素- <polygon>元素
<polygon points="" />
points - 折线的所有点坐标值,都设置在该属性中
注意: SVG绘制图形使用元素
单标签 - 增加结束符"/"
起始标签
特效元素
线性渐变 - 基准线
<defs>
<linearGradient id="grad" x1="基准线的起点坐标值x" y1="基准线的起点坐标值y" x2="基准线的终点坐标值x" y2="基准线的终点坐标值y">
<stop offset="0%~100%" stop-color="颜色" />
</linearGradient>
</defs>
<rect fill="url(#渐变元素的id)">
射线渐变 - 基准圆
<defs>
<radialGradient id="grad" fx="设置起点基准圆的圆心x" fy="设置起点基准圆的圆心y" cx="设置终点基准圆的圆心x" cy="设置终点基准圆的圆心y" r="设置终点基准圆的半径">
<stop offset="0%~100%" stop-color="颜色" />
</radialGradient>
</defs>
<rect fill="url(#渐变元素的id)">
注意:线性渐变或射线渐变,设置基准线(圆)的坐标值必须是百分值,允许为负值,允许为大于 100% 的值
设置渐变颜色位置必须是百分值
只能是从 0% ~ 100%
滤镜元素 - 高斯模糊
滤镜元素 - <filter>元素
高斯模糊 - <feGaussianBlur>元素
,免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com