本篇文章给大家带来的内容是关于SVG画图功能：svg实现画出一朵花（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
5ba626b379994d53f7acf72a64f9b697 标记和 SVG 以及 VML 之间的一个重要的不同是，5ba626b379994d53f7acf72a64f9b697 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。
一、创建一个 XXX.svg文件（该文件，创建了一个红色的圆）
<?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> 标签。
<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的标准标签，被所有较新的浏览器支持，不允许使用脚本
<object data=rect.svg width=300 height=100 type=image/svg+xml codebase=http://www.adobe.com/svg/viewer/install/ />
codebase：指向下载插件的url
3)iframe标签：（推荐）
<iframe src=rect.svg width=300 height=100> </iframe>
三、SVG的形状
1、矩形<rect width= height= style=>
<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>
<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
<?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
<!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标签的用法总结
svg中53207a333cb59025d48bd080b9112b21元素的使用及marker属性的介绍
svg如何实现坐标系统变换（附代码）
以上就是SVG画图功能：svg实现画出一朵花（附代码）的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » SVG画图功能：svg实现画出一朵花（附代码）
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
