1. 首页
  2. IT资讯

前端必备知识点—SVG

“u003Cdivu003Eu003Cpu003E前端必备知识点—SVGu003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F320e0004623d6a5ad613″ img_width=”300″ img_height=”300″ alt=”前端必备知识点—SVG” inline=”0″u003Eu003Cu002Fpu003Eu003Ch1u003E基本内容u003Cu002Fh1u003Eu003Cpu003E什么是SVG? 全称为Scalable Vector Graphics,是一种使用XML技术描述二维图形的语言,简单来说 – 矢量图(不失真)u003Cu002Fpu003Eu003Ch1u003ESVG与HTML5的关系u003Cu002Fh1u003Eu003Cpu003E 早在HTML5之前,存在SVG技术u003Cu002Fpu003Eu003Cpu003E SVG文件扩展名为”.svg”u003Cu002Fpu003Eu003Cpu003E 在HTML5出现之前,要在HTML页面中引入SVG文件u003Cu002Fpu003Eu003Cpu003E 在HTML5出现之后,将SVG内容直接定义在HTML页面中u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E SVG的优势u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E 可以使用文本编辑器创建和修改,SVG可被搜索、索引等,SVG绘制的图像不失真的u003Cu002Fpu003Eu003Ch1u003ESVG与Canvas的区别u003Cu002Fh1u003Eu003Cpu003E SVG不依赖于分辨率,使用DOM或绑定事件,实现大型渲染区域的应用(地图类)u003Cu002Fpu003Eu003Cpu003E Canvas依赖于分辨率,不能使用DOM或绑定事件的,运行时以图片形式出现”.jpg”u003Cu002Fpu003Eu003Cpu003E SVG的标准也是W3C定制的u003Cu002Fpu003Eu003Ch1u003E设置样式u003Cu002Fh1u003Eu003Cpu003E1.通过元素的属性方式u003Cu002Fpu003Eu003Cpu003E fill – 设置填充样式u003Cu002Fpu003Eu003Cpu003E fill-opacity – 设置填充透明度u003Cu002Fpu003Eu003Cpu003E stroke – 设置描边样式u003Cu002Fpu003Eu003Cpu003E stroke-width – 设置边框的宽度u003Cu002Fpu003Eu003Cpu003E2.通过style属性,使用类似于CSS属性设置方式u003Cu002Fpu003Eu003Cpu003E 注意 – 不能使用CSS中的样式进行设置u003Cu002Fpu003Eu003Cpu003E transform属性,用于设置转换效果u003Cu002Fpu003Eu003Cpu003E 方法有:rotate()、scale()、translate()u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F321000035971f12163e1″ img_width=”485″ img_height=”442″ alt=”前端必备知识点—SVG” inline=”0″u003Eu003Cu002Fpu003Eu003Ch1u003E绘制图形u003Cu002Fh1u003Eu003Cpu003E u003Cstrongu003E矩形元素u003Cu002Fstrongu003E- <rect>元素u003Cu002Fpu003Eu003Cpu003E <rect x=”” y=”” width=”” height=”” rx=”” ry=”” u002F>u003Cu002Fpu003Eu003Cpu003E x和y – 绘制矩形的左上角坐标值u003Cu002Fpu003Eu003Cpu003E width和height – 设置绘制矩形的宽度和高度u003Cu002Fpu003Eu003Cpu003E rx和xy – 设置圆角矩形u003Cu002Fpu003Eu003Cpu003E u003Cstrongu003E圆形元素u003Cu002Fstrongu003E – <circle>元素u003Cu002Fpu003Eu003Cpu003E <circle cx=”” cy=”” r=”” u002F>u003Cu002Fpu003Eu003Cpu003E cx和cy – 绘制圆形的圆心坐标值u003Cu002Fpu003Eu003Cpu003E cx和cy不设置值的话,默认为(0,0)u003Cu002Fpu003Eu003Cpu003E r – 绘制圆形的半径u003Cu002Fpu003Eu003Cpu003E u003Cstrongu003E椭圆元素u003Cu002Fstrongu003E- <ellipse>元素u003Cu002Fpu003Eu003Cpu003E <ellipse cx=”” cy=”” rx=”” ry=”” u002F>u003Cu002Fpu003Eu003Cpu003E cx和cy – 绘制椭圆的圆心坐标值u003Cu002Fpu003Eu003Cpu003E rx – 绘制椭圆的水平方向的半径u003Cu002Fpu003Eu003Cpu003E ry – 绘制椭圆的垂直方向的半径u003Cu002Fpu003Eu003Cpu003E 注意:当rx和ry的值相同时,绘制的是圆形u003Cu002Fpu003Eu003Cpu003E u003Cstrongu003E线条元素u003Cu002Fstrongu003E- <line>元素u003Cu002Fpu003Eu003Cpu003E <line x1=”” y1=”” x2=”” y2=”” u002F>u003Cu002Fpu003Eu003Cpu003E x1和y1 – 绘制直线的起点坐标值u003Cu002Fpu003Eu003Cpu003E x2和y2 – 绘制直线的终点坐标值u003Cu002Fpu003Eu003Cpu003E 注意:绘制直线时,默认描边颜色为白色u003Cu002Fpu003Eu003Cpu003E u003Cstrongu003E 折线元素u003Cu002Fstrongu003E – <ployline>元素u003Cu002Fpu003Eu003Cpu003E <polyline points=”” u002F>u003Cu002Fpu003Eu003Cpu003E points – 折线的所有点坐标值,都设置在该属性中u003Cu002Fpu003Eu003Cpu003E 注意:描边颜色默认为白色,填充颜色默认为黑色u003Cu002Fpu003Eu003Cpu003E u003Cstrongu003E多边形元素u003Cu002Fstrongu003E- <polygon>元素u003Cu002Fpu003Eu003Cpu003E <polygon points=”” u002F>u003Cu002Fpu003Eu003Cpu003E points – 折线的所有点坐标值,都设置在该属性中u003Cu002Fpu003Eu003Cpu003E 注意: SVG绘制图形使用元素u003Cu002Fpu003Eu003Cpu003E单标签 – 增加结束符”u002F”u003Cu002Fpu003Eu003Cpu003E 起始标签u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002F321000035a568bcce961″ img_width=”420″ img_height=”300″ alt=”前端必备知识点—SVG” inline=”0″u003Eu003Cu002Fpu003Eu003Ch1u003E特效元素u003Cu002Fh1u003Eu003Cpu003E u003Cstrongu003E 线性渐变 – 基准线u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E <defs>u003Cu002Fpu003Eu003Cpu003E <linearGradient id=”grad” x1=”基准线的起点坐标值x” y1=”基准线的起点坐标值y” x2=”基准线的终点坐标值x” y2=”基准线的终点坐标值y”>u003Cu002Fpu003Eu003Cpu003E <stop offset=”0%~100%” stop-color=”颜色” u002F>u003Cu002Fpu003Eu003Cpu003E <u002FlinearGradient>u003Cu002Fpu003Eu003Cpu003E<u002Fdefs>u003Cu002Fpu003Eu003Cpu003E<rect fill=”url(#渐变元素的id)”>u003Cu002Fpu003Eu003Cpu003E u003Cstrongu003E射线渐变 – 基准圆u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E <defs>u003Cu002Fpu003Eu003Cpu003E <radialGradient id=”grad” fx=”设置起点基准圆的圆心x” fy=”设置起点基准圆的圆心y” cx=”设置终点基准圆的圆心x” cy=”设置终点基准圆的圆心y” r=”设置终点基准圆的半径”>u003Cu002Fpu003Eu003Cpu003E <stop offset=”0%~100%” stop-color=”颜色” u002F>u003Cu002Fpu003Eu003Cpu003E <u002FradialGradient>u003Cu002Fpu003Eu003Cpu003E<u002Fdefs>u003Cu002Fpu003Eu003Cpu003E<rect fill=”url(#渐变元素的id)”>u003Cu002Fpu003Eu003Cpu003E 注意:线性渐变或射线渐变,设置基准线(圆)的坐标值必须是百分值,允许为负值,允许为大于 100% 的值u003Cu002Fpu003Eu003Cpu003E 设置渐变颜色位置必须是百分值u003Cu002Fpu003Eu003Cpu003E 只能是从 0% ~ 100%u003Cu002Fpu003Eu003Cpu003E u003Cstrongu003E滤镜元素 – 高斯模糊u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E 滤镜元素 – <filter>元素u003Cu002Fpu003Eu003Cpu003E 高斯模糊 – <feGaussianBlur>元素u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:前端必备知识点—SVG

主题测试文章,只做测试使用。发布者:℅傍ㄖ免沦陷dε鬼,转转请注明出处:http://www.cxybcw.com/11274.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code