SVG总结小知识

最新推荐文章于 2025-08-23 08:00:22 发布

转载最新推荐文章于 2025-08-23 08:00:22 发布 · 125 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liubeimeng/p/5685606.html

文章标签：

#xhtml

SVG：可缩放矢量图形。全称是：Scalable Vector Graphics

SVG使用 XML 格式定义图像。

SVG是使用 XML 来描述（二维图形和绘图）程序的语言。

SVG是W3C的推荐标准

SVG于2003年1月14日成为W3C推荐标准。

这是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 xmlns="http://www.w3.org/2000/svg" version="1.1">

<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

这是SVG在HTML中：

SVG文件可以通过以下标签嵌入 HTML 文档：<embed>、<object> 和 <iframe>。

SVG的代码可以直接嵌入到HTML页面中，或你可以直接链接到SVG文件中。

使用<embed>标签：

优势：所有主流浏览器都支持，并允许使用脚本。

缺点：不推荐在HTML4和 XHTML中使用。

SVG有一些预定义的形状元素，可被开发者使用操作。

矩形<rect>

圆形<circle>

椭圆<ellipse>

线<line>

折线<polyline>

多边形<polygon>

路径<path>

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <link rel="stylesheet" href="css/main.css">
 7 </head>
 8 <body>
 9 
10 <svg xmlns="http://www.w3.org/2000/svg" version="1.0">
11     <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(255,0,0);"></rect>
12 </svg>
13 <p>代码解析</p>
14 <ul>
15     <li>rect元素的width和height属性可定义矩形的高度和宽度</li>
16     <li>style属性用来定义css属性</li>
17     <li>css的fill属性定义矩形的填充颜色</li>
18     <li>css的stroke-width属性定义矩形边框的宽度</li>
19     <li>css的stroke属性定义矩形边框的颜色</li>
20 </ul>
21 
22 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
23     <rect x="50" y="20" width="100" height="100" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"></rect>
24 </svg>
25 <p>代码解析</p>
26 <ul>
27     <li>x属性定义矩形的左侧位置</li>
28     <li>y属性定义矩形的顶端位置</li>
29     <li>CSS的fill-opacity属性定义填充颜色的透明度</li>
30     <li>CSS的stroke-opacity属性定义笔触颜色的透明度</li>
31 </ul>
32 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
33     <rect x="50" y="20" width="100" height="100" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.5;opacity:0.5"></rect>
34 </svg>
35 <p>代码解析</p>
36 <ul>
37     <li>CSS的opacity属性用于定义了元素的透明值</li>
38 </ul>
39 
40 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
41     <rect x="50" y="20" rx="20" ry="20" width="100" height="100" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"></rect>
42 </svg>
43 <p>代码解析</p>
44 <ul>
45     <li>rx 和 ry 属性可使矩形产生圆角</li>
46 </ul>
47 </body>
48 </html>

这个是画个圆，感觉挺简单的。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 9     <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"></circle>
10 </svg>
11 <p>cx和cy属性定义圆点的x和y坐标。如果省略cx和cy,圆的中心会被设置为(0,0).r属性定义圆的半径。</p>
12 
13 </body>
14 </html>