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

前端开发教程 2025-03-02 0

本篇文章给大家带来的内容是关于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就是用来画图的，还可以将各种图形叠加，形成你自己的图

相关文章