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的内容短小精悍，易于阅读。 （编辑：衡阳站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
