Html5之svg可缩放矢量图形_动力节点Java学院清算
|
关于支持HTML5与SVG的赏识器不是这里接头的重点，根基上装上最新的Chrome可能FireFox赏识器就差不多了(IE用户请装IE9就对了，至于IE9之前的版本，必要装SVG的插件，这里就直接略过了)。对付直接支持SVG的赏识器，SVG首要回收两面两种泛起的方法。 内联到HTML SVG是尺度的HTML元素，直接写到HTML中就可以了，看下面的例子： <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html> <head> <!-- <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> --> <title> My First SVG Page</title> </head> <body> <svg xmlns="" version="1.1" width="200px" height="200px"> <rect x="0" y="0" width="100%" height="100%" fill="none" stroke="black"/> <circle cx="100" cy="100" r="50" style="stroke: black; fill: red;"/> </svg> </body> </html> 请留意开头的部门xml声明，与svg的定名空间xmlns、版本version等部门，首要是思量兼容性的题目；这些部门在HTML5中根基都可以不消写了(写不写照旧本身瞧着办吧)。 独立SVG文件 独立SVG指的是通过行使svg文件扩展名来提供向量图形文件名目。在赏识器中嵌入这个svg文件就可以行使了。 1.独立的SVG文件/页面，界说的模板根基就像下面的一样： <svg width="100%" height="100%"> <!-- SVG markup here. --> </svg> 把这样的文本文件生涯成以svg为扩展名的文件，譬喻sun.svg，这样的文件可以直接用赏识器打开赏识，也可以作为引用嵌入到此外页面中。 2.HTML引用外部的SVG文件。 行使object可能img元素嵌入svg图形就可以了，譬喻下面的小例子： <!DOCTYPE html> <html> <head> <title> My First SVG Page</title> </head> <body> <object data=http://www.jb51.net/html5/"sun.svg" type="image/svg+xml" width="300px" height="300px"> <!-- Implement fallback code here, or display a message: --> <p>Your browser does not support SVG - please upgrade to a modern browser.</p> </object> <img src=http://www.jb51.net/html5/"sun.svg" alt="svg not supported!" /> </body> </html> 着实SVG也可以放在其他的XML文档中，也可以像其他的XML文档一样，行使XML相干的技能名目化和验证，这个不是重点，此处略去了。 SVG的渲染次序 SVG是严酷凭证界说元素的次序来渲染的，这个与HTML靠z-index值来节制分层纷歧样。在SVG中，写在前面的元素先被渲染，写在后头的元素后被渲染。后渲染的元素会包围前面的元素，固然偶然辰受透明度影响，看起来不是被包围的，可是SVG确实是严酷凭证先后次序来渲染的。 留意：SVG是以XML界说的，以是是巨细写敏感的，这点与HTML纷歧样。 突袭HTML5之SVG 2D入门2 - 图形绘制 <svg width="200" height="250"> <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/> <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/> <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/> <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" stroke="orange" fill="transparent" stroke-width="5"/> <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" stroke="green" fill="transparent" stroke-width="5"/> <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/> </svg>
这个例子画了许多外形：正常的矩形，带圆角的矩形，圆形，椭圆形，直线，折线，多边形，尚有路径。这些都属于根基的图形元素。固然绘制一个图形有许多种方法，好比矩形可以用rect实现，也可以用path等实现，可是我们照旧应该只管保持SVG的内容短小精壮，易于阅读。 （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
