SVG总结小知识

北城以北 提交于 2020-02-10 03:43:03
SVG:可缩放矢量图形。全称是:Scalable Vector Graphics
SVG使用 XML 格式定义图像。
 
SVG是使用 XML 来描述(二维图形和绘图)程序的语言。
 
SVG是W3C的推荐标准
SVG于2003年1月14日成为W3C推荐标准。
 
这是SVG单独文件:

<!--
standalone:该属性规定此 SVG 文件是否是 “独立”, 或含有对外部文件的引用。
standalone="no"意味着 SVG 文档会引用一个外部文件,就是 DTD 文件。
-->
<?xml version="1.0" standalone="no" ?>
<!--
引用外部的 SVG DTD 。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd” 。
 DTD 位于 W3C, 含有所有允许的 SVG 元素。
-->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!--
SVG代码以 <svg> 元素开始。width 和 height 属性可设置此 SVG 文档的宽度和高度。
version属性可定义所使用的SVG版本, xmlns属性可定义 SVG命名空间。
-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<!--
circle用来创建一个圆圈, cx 和 cy 属性定义圆中心坐标 (x, y)。如果忽略这两个属性,那么圆点会被设置为 (0,0)。
r属性定义圆的半径。stroke和strike-width属性控制如何显示形状轮廓的颜色和宽度。
fill属性设置形状内的颜色。
-->
<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>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!