SVG画图功能：svg实现画出一朵花（附代码）

来源:网络整理作者: 发布时间:2020-12-22 17:04

本篇文章给大家带来的内容是关于SVG画图功能：svg实现画出一朵花（附代码），有一定的参考价值，有需要的朋友...

本篇文章给大家带来的内容是关于SVG画图功能：svg实现画出一朵花（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

<canvas> 标记和 SVG 以及 VML 之间的一个重要的不同是，<canvas> 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。

一、创建一个 XXX.svg文件（该文件，创建了一个红色的圆）

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ""> <svg width="100%" height="100%" version="1.1" xmlns=""> <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> 标签。

pluginspage: 指向下载插件的url

2）使用object标签：html4的标准标签，被所有较新的浏览器支持，不允许使用脚本

codebase：指向下载插件的url

3)iframe标签：（推荐）

三、SVG的形状

1、矩形<rect width="" height="" style="">

style 属性用来定义 CSS 属性

stroke-width 属性定义矩形边框的宽度

stroke 属性定义矩形边框的颜色

2、圆形<circle>

3、椭圆<ellipse>

这里的椭圆只有一个圆点（数学的椭圆通常说有两个焦点）

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" ""> <svg width="100%" height="100%" version="1.1" xmlns=""> <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=https://www.ym97.com/"flower.svg" width="100%" height="600" style="padding: 5px"> </iframe> </body> </html>

效果图

SVG画图功能：svg实现画出一朵花（附代码）

虽然丑了些，总体还是一朵花啦！嘻嘻

总体来说，svg就是用来画图的，还可以将各种图形叠加，形成你自己的图

用react的ReactCSSTransitionGroup插件	IE9正式版无论从性能提升还是
HTML5 学习总结（四）canvas绘图	canvas与html5实现视频截图成果
html5 canvas常用api总结(二)画图	而不是元素本身
我们先来看一下实现效果：	实现代码：这里写代码片h1
layui框架的table字段筛选功能介	nav是什么功能
如何在html页面中实现查找功能	css怎么实现不定宽水平居中
canvas实现图片涂鸦功能（附代	用canvas实现简单的下雪效果（
css div不随滚动条移动的实现方	如何使用HTML5 canvas实现图像的

CSS/HTML

SVG画图功能：svg实现画出一朵花（附代码）

相关文章

热门TAG

最新文章

热门文章