本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家带来的内容是关于SVG画图功能:svg实现画出一朵花(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。<canvas> 标记和 SVG 以及 VML 之间的一个重要的不同是,<canvas> 有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图。
一、创建一个 XXX.svg文件(该文件,创建了一个红色的圆)
1 2 3 4 5 6 7 8 9 10 11 12 | <? xml version = "1.0" standalone = "no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
< svg width = "100%" height = "100%" version = "1.1"
xmlns = "http://www.w3.org/2000/svg" >
< circle cx = "100" cy = "50" r = "40" stroke = "black"
stroke-width = "2" fill = "red" />
</ svg >
|
SVG使用XML编写,并保存为.svg文件。该.svg文件必须在.html文件中被引用
二、svg in HTML
1)使用<embed>标签:被所有主流的浏览器支持,并允许使用脚本
注释:当在 HTML 页面中嵌入 SVG 时使用 <embed> 标签是 Adobe SVG Viewer 推荐的方法!然而,如果需要创建合法的 XHTML,就不能使用 <embed>。任何 HTML 规范中都没有 <embed> 标签。
1 2 3 | < embed src = "rect.svg" width = "300" height = "100"
type = "image/svg+xml"
pluginspage = "http://www.adobe.com/svg/viewer/install/" />
|
pluginspage: 指向下载插件的url
2)使用object标签:html4的标准标签,被所有较新的浏览器支持,不允许使用脚本
1 2 3 | < object data = "rect.svg" width = "300" height = "100"
type = "image/svg+xml"
codebase = "http://www.adobe.com/svg/viewer/install/" />
|
codebase:指向下载插件的url
3)iframe标签:(推荐)
1 2 | < iframe src = "rect.svg" width = "300" height = "100" >
</ iframe >
|
三、SVG的形状
1、矩形<rect width="" height="" style="">
1 2 3 | < rect width = "300" height = "100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
|
style 属性用来定义 CSS 属性
stroke-width 属性定义矩形边框的宽度
stroke 属性定义矩形边框的颜色
2、圆形<circle>
3、椭圆<ellipse>
1 2 3 | < ellipse cx = "300" cy = "150" rx = "200" ry = "80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>
|
这里的椭圆只有一个圆点( 数学的椭圆通常说有两个焦点 )
cx 属性定义圆点的 x 坐标
cy 属性定义圆点的 y 坐标
rx 属性定义水平半径(通过两个焦点的线的一半)
ry 属性定义垂直半径
4、线条<line>
5、多边形<polygon>
6、折线<polyline>
7、路径<path>
在<svg>标签中,如果都在一个位置上,后边的形状会覆盖前面的形状
小花的代码
flower.svg
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <? xml version = "1.0" standalone = "no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
< svg width = "100%" height = "100%" version = "1.1"
xmlns = "http://www.w3.org/2000/svg" >
< circle cx = "90" cy = "90" r = "30" fill = "red" />
< circle cx = "150" cy = "90" r = "30" fill = "yellow" />
< circle cx = "120" cy = "60" r = "30" fill = "blue" />
< circle cx = "120" cy = "120" r = "30" fill = "green" />
< circle cx = "120" cy = "90" r = "15" fill = "pink" />
< line x1 = "120" y1 = "150" x2 = "120" y2 = "250"
style = "stroke:rgb(100,55,69);stroke-width:2" />
< ellipse cx = "90" cy = "190" rx = "40" ry = "10"
style = "fill:lime" />
< ellipse cx = "150" cy = "225" rx = "40" ry = "10"
style = "fill:lime" />
</ svg >
|
index.html
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< title >Title</ title >
</ head >
< body >
< iframe src = "flower.svg" width = "100%" height = "600" style = "padding: 5px" >
</ iframe >
</ body >
</ html >
|
效果图
虽然丑了些,总体还是一朵花啦!嘻嘻
总体来说,svg就是用来画图的,还可以将各种图形叠加,形成你自己的图
相关文章推荐:
HTML标签:img标签的用法总结
元素的使用及marker属性的介绍">svg中<marker>元素的使用及marker属性的介绍
svg如何实现坐标系统变换(附代码)
以上就是SVG画图功能:svg实现画出一朵花(附代码)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
Html的文档类型怎么选择
Html的<figcaption>标签
Html文本格式的知识总结
Html怎么改变鼠标形状
Html文件怎么弄注释
Html怎么写空格
Html noframes标签怎么用
Html q标签怎么用
Html的正式名称是什么?
Html span标签是什么意思?span标签的作用详解
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » SVG画图功能:svg实现画出一朵花(附代码)