Illustrator快速入门之HTML5系列-SVG了解
凌雪 2018-09-14 来源 :网络 阅读 1099 评论 0

摘要:本文将带你了解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!

本文由 @凌雪 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程