摘要:本文将带你了解Illustrator快速入门之HTML5系列-SVG了解,希望本文对大家学Illustrator有所帮助。
本文将带你了解Illustrator快速入门之HTML5系列-SVG了解,希望本文对大家学Illustrator有所帮助。
我们对svg进行初步了解
1.介绍
SVG是一种矢量图格式。SVG是Scalable Vector Graphics三个单词的首字母缩写。Adobe Illustrator是专门编辑、制作矢量图的软件工具。SVG是Adobe Illustrator的主要制作目标。你可以在轻松的网页上使用漂亮的SVG图,但SVG有很多的用法你可能还不知道。
我们通过AI可以制作svg,制作的矢量图在AI提供了直接生成svg文件的选择项,还有编辑svg文件的选项功能。
3.兼容及相关
ie9及其以上和其他主流浏览器
他是来自xml的扩展
canvas只能通过js控制绘制,svg通过标签绘制
3.实用到html页面
--1.创建svg文件,后缀名是.svg,保存成svg.svg
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="//www.w3.org/2000/svg"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> </svg>
其中
circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
是绘制处理,我们看单词应该是一个红色圆形的绘制,半径40,描边宽度是2,和我们的canvas的dom api差不多名字
--2.embed标签引入外部svg文件
html结构如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><style type="text/css"> *{ margin:0; padding:0;} </style><title>demo</title></head><body> <embed src="svg.svg" width="300" height="100" type="image/svg+xml" pluginspage="//www.adobe.com/svg/viewer/install/" /> </body><script type="text/javascript"> window.onload=function(){ }; </script></html>
这是html5提供的新标签,作为外部内容和插件引入处理。
--3.object标签引入外部svg文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><style type="text/css"> *{ margin:0; padding:0;} </style><title>demo</title></head><body> <object data="svg.svg" width="300" height="100" type="image/svg+xml" codebase="//www.adobe.com/svg/viewer/install/" /> </body><script type="text/javascript"> window.onload=function(){ }; </script></html>
object是以前就有的标签,还可以引入视频,音频等等文件。
--4.iframe标签引入外部svg文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><style type="text/css"> *{ margin:0; padding:0;} </style><title>demo</title></head><body> <iframe src="svg.svg" width="300" height="100"> </iframe> </body><script type="text/javascript"> window.onload=function(){ }; </script></html>
浮动框架标签以前我们都是引入外部的html页面,同样可以引入svg。
--5.html页面内部写svg标签
<!<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><style type="text/css"> *{ margin:0; padding:0;} </style><title>demo</title></head><body><svg width="100%" height="100%" version="1.1"xmlns="//www.w3.org/2000/svg"><circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red"/></svg></body><script type="text/javascript"> window.onload=function(){ }; </script></html>
我们最喜欢的方式,写法确实不是很好,这样就会和我们的html标签交错。
--6.svg外部文件做图片引入
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><style type="text/css"> *{ margin:0; padding:0;} </style><title>demo</title></head><body> <img src="svg.svg" width="300" /></body><script type="text/javascript"> window.onload=function(){ }; </script></html>
--7.svg外部文件做css背景引入
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><style type="text/css"> *{ margin:0; padding:0;} .svg{background: url('svg.svg') no-repeat center;height: 300px;width: 300px;} </style><title>demo</title></head><body> <div class="svg"></div></body><script type="text/javascript"> window.onload=function(){ }; </script></html>
总结:
svg页面可以做背景图
可以充当图片资源
可以作为外部对象被引用标签引入
可以在html页面内部以标签形式创建。
学习SVG的各种绘制标签
1.一份demo演示程序
我们都采用html页面内标签形式创建,比较符合我们写div时候的习惯,还是运行上面的程序,在高级浏览器下预览:
<!DO<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><style type="text/css"> *{ margin:0; padding:0;} </style><title>demo</title></head><body><svg width="100%" height="100%" version="1.1"xmlns="//www.w3.org/2000/svg"><circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red"/></svg></body><script type="text/javascript"> window.onload=function(){ }; </script></html>
显示效果:
这种写法和我们书写html几乎没有任何的区别,相对canvas要用js的绘制我们理解更容易。
svg是一对闭合标签,就是创建了绘制的舞台画布,
circle是绘制处理标签,绘制圆形,里面的属性就是绘制的具体操作。
既然有绘制圆形,通过对canvas的了解就可以想到对应存在:矩形,线,曲线,贝塞尔曲线等的绘制标签。
2.利用js进行动态处理
我们利用js对dom的操作,同样给circle加入id,找到和进行处理:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><style type="text/css"> *{ margin:0; padding:0;} </style><title>demo</title></head><body><svg width="100%" height="100%" version="1.1"xmlns="//www.w3.org/2000/svg"><circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red"/ id="aa"></svg></body><script type="text/javascript"> window.onload=function(){ var aa=document.getElementById("aa"); aa.onclick=function(){ aa.setAttribute("stroke-width","5"); }; };</script></html>
利用dom找到aa,然后点击事件的处理修改绘制属性,我们发现变成了5,证明js+dom操作同样适合对svg的处理。
3.绘制矩形
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><style type="text/css"> *{ margin:0; padding:0;} </style><title>demo</title></head><body><svg width="800" height="800" version="1.1"xmlns="//www.w3.org/2000/svg"><circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red"/ id="aa"></circle><rect x="220" y="50" width="50" height="50"style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/></rect></svg></body><script type="text/javascript"> window.onload=function(){ var aa=document.getElementById("aa"); aa.onclick=function(){ aa.setAttribute("stroke-width","5"); }; };</script></html>
绘制矩形就是rect标签,预览看演示就知道 x y width height style中的stroke等的用途了。
我认为几个注意地方:
1.标签闭合,我们demo是没闭合的,这样在绘制多个会出现问题
2.svg标签的宽高属性表示画布大小,标签闭合
4.绘制圆形
已经在上面涉及circle标签定义。
4.绘制椭圆
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><style type="text/css"> *{ margin:0; padding:0;} </style><title>demo</title></head><body><svg width="800" height="800" version="1.1"xmlns="//www.w3.org/2000/svg"><circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red"/ id="aa"></circle><rect x="220" y="50" width="50" height="50"style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/></rect><ellipse cx="300" cy="200" rx="200" ry="80"style="fill:#ddd;stroke:#aaa;stroke-width:2"/></ellipse></svg></body><script type="text/javascript"> window.onload=function(){ var aa=document.getElementById("aa"); aa.onclick=function(){ aa.setAttribute("stroke-width","5"); }; };</script></html>
使用ellipse标签,cx cy标签圆心,rx ry表示在水平和垂直的半径
5.绘制线条
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><style type="text/css"> *{ margin:0; padding:0;} </style><title>demo</title></head><body><svg width="800" height="800" version="1.1"xmlns="//www.w3.org/2000/svg"><circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red"/ id="aa"></circle><rect x="220" y="50" width="50" height="50"style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/></rect><ellipse cx="300" cy="200" rx="200" ry="80"style="fill:#ddd;stroke:#aaa;stroke-width:2"/></ellipse><line x1="0" y1="0" x2="300" y2="300"style="stroke:rgb(99,99,99);stroke-width:2"/></line></svg></body><script type="text/javascript"> window.onload=function(){ var aa=document.getElementById("aa"); aa.onclick=function(){ aa.setAttribute("stroke-width","5"); }; };</script></html>
使用line标签,其实坐标配对实现
6.绘制多边形
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><style type="text/css"> *{ margin:0; padding:0;} </style><title>demo</title></head><body><svg width="800" height="800" version="1.1"xmlns="//www.w3.org/2000/svg"><circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red"/ id="aa"></circle><rect x="220" y="50" width="50" height="50"style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/></rect><ellipse cx="300" cy="200" rx="200" ry="80"style="fill:#ddd;stroke:#aaa;stroke-width:2"/></ellipse><line x1="0" y1="0" x2="300" y2="300"style="stroke:rgb(99,99,99);stroke-width:2"/></line><polygon points="220,100 300,210 170,250"style="fill:#cccccc;stroke:#000000;stroke-width:1"/></polygon></svg></body><script type="text/javascript"> window.onload=function(){ var aa=document.getElementById("aa"); aa.onclick=function(){ aa.setAttribute("stroke-width","5"); }; };</script></html>
使用polygon标签,在 points里每对坐标之间用空格分割,定了3组就是三角形
7.绘制多边形
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><style type="text/css"> *{ margin:0; padding:0;} </style><title>demo</title></head><body><svg width="800" height="800" version="1.1"xmlns="//www.w3.org/2000/svg"><circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red"/ id="aa"></circle><rect x="220" y="50" width="50" height="50"style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/></rect><ellipse cx="300" cy="200" rx="200" ry="80"style="fill:#ddd;stroke:#aaa;stroke-width:2"/></ellipse><line x1="0" y1="0" x2="300" y2="300"style="stroke:rgb(99,99,99);stroke-width:2"/></line><polygon points="220,100 300,210 170,250"style="fill:#cccccc;stroke:#000000;stroke-width:1"/></polygon><polyline points="0,0 0,20 20,20 20,40 40,40 40,60"style="fill:white;stroke:red;stroke-width:2"/></polyline></svg></body><script type="text/javascript"> window.onload=function(){ var aa=document.getElementById("aa"); aa.onclick=function(){ aa.setAttribute("stroke-width","5"); }; };</script></html>
使用polyline标签,用法和多边形一样
8.绘制路径
这里是最灵活的处理,我们可以实现各种自定义的绘制,基本的参数:
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath
有一半可以和我们canvas的路径绘制对应上。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><style type="text/css"> *{ margin:0; padding:0;} </style><title>demo</title></head><body><svg width="800" height="800" version="1.1"xmlns="//www.w3.org/2000/svg"><path d="M250 150 L150 350 L350 350 Z" /></svg></body><script type="text/javascript"> window.onload=function(){ var aa=document.getElementById("aa"); aa.onclick=function(){ aa.setAttribute("stroke-width","5"); }; };</script></html>
操作是moveto其实坐标,连接到 lineto 连接到lineto 最后closepath,实现闭合,形成了三角形绘制。
我们利用贝塞尔绘制一次,用的是c,贝塞尔包含2组控制点,起始点由前面接口创建,最后写一个结束点,所以c会写3组坐标
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><style type="text/css"> *{ margin:0; padding:0;} </style><title>demo</title></head><body><svg width="800" height="800" version="1.1"xmlns="//www.w3.org/2000/svg"><path d="M250 150 C150 350 350 350 500 500" style="fill:#fff;stroke:#000;stroke-width:2"/></svg></body><script type="text/javascript"> window.onload=function(){ var aa=document.getElementById("aa"); aa.onclick=function(){ aa.setAttribute("stroke-width","5"); }; };</script></html>
我们把填充设置为白色,看见一条如同ps钢笔工具的路径出现了。
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标常用软件之Illustrator!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号