一、介绍:是使用 XML来描述二维图形和绘图程序的语言,可缩放矢量图形。Internet Explorer9,火狐,谷歌Chrome,Opera和Safari都支持SVG。IE8和早期版本都需要一个插件 - 如Adobe SVG浏览器,这是免费提供的。
阿里svg网址:https://www.iconfont.cn/plus
二、svg属性:SVG 代码以 <svg> 元素开始,包括开启标签 <svg> 和关闭标签 </svg>。这是根元素。常用属性:
1、width :宽度,数字或者百分比
2、height :高度,数字或者百分比
3、version :可定义所使用的 SVG 版本
4、xmlns :可定义 SVG 命名空间。
三、语法:svg预定义的形状元素(标签)有:
1、矩形 <rect>:<rect> 标签可用来创建矩形,以及矩形的变种。常用属性:
(1) width 和 height :可定义矩形的高度和宽度
(2)x 、y属性:定义矩形的左侧位置、顶端位置(如,x="0" 表示矩形到浏览器窗口左侧的距离是 0px,y="0" 表示矩形到浏览器窗口顶端的距离是 0px),数字或者百分比
(3)rx 和 ry 属性:可使矩形产生圆角。
(4)style 属性:用来定义 CSS 属性,其中,
1)fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值)
2)stroke-width 属性定义边框的宽度
3)stroke 属性定义边框的颜色
4)fill-opacity :定义填充颜色透明度(合法的范围是:0 - 1)
5)stroke-opacity :定义轮廓颜色的透明度(合法的范围是:0 - 1)
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100" x="50" y="20"
style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>
2、 圆形<circle> :标签可用来创建一个圆。常见属性:
(1)cx和cy:定义圆点的x和y坐标。如果省略cx和cy,圆的中心会被设置为(0, 0)
(2)r:定义圆的半径
<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>
3、椭圆<ellipse>
4、直线 <line>
5、多边形<polygon>
6、曲线<polyline>
7、路径<path>:<path> 元素用于定义一个路径。常用属性:
(1)d:定义路径的,下面的命令可用于路径数据,均允许小写字母。大写表示绝对定位,小写表示相对定位:
1)M = moveto
2)L = lineto
3)H = horizontal lineto
4)V = vertical lineto
5)C = curveto
6)S = smooth curveto
7)Q = quadratic Bézier curve
8)T = smooth quadratic Bézier curveto
9)A = elliptical Arc
10)Z = closepath
如开始于位置150 0,到达位置75 200,然后从那里开始到225 200,最后在150 0关闭路径:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
8、文本 <text>:
四、使用方法:有三种方法:
1、方法1:直接使用svg代码;如:我从阿里矢量图官网https://www.iconfont.cn/复制的svg半圆,并插入自定义的文字(text标签中的内容):
<svg
t="1612603582072"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="2958"
width="100%"
height="100%"
>
<path
d="M804.5 835.4375L720.828125 728.5625c109.6875-105.46875 123.75-279.84375 27.421875-401.484375-103.359375-130.078125-291.796875-152.578125-421.875-49.921875s-151.875 291.796875-49.21875 421.875c9.140625 11.25 18.28125 21.796875 28.828125 31.640625l-83.671875 106.171875c-18.28125-16.171875-35.15625-34.453125-51.328125-54.140625C21.921875 594.265625 54.265625 320.046875 242.703125 171.6875S704.65625 54.96875 853.71875 243.40625c142.734375 180.703125 118.828125 439.453125-49.21875 592.03125z"
fill="#F6C076"
p-id="2959"
></path>
<text x="50%" y="45%" font-size="150" style="fill: #555555" text-anchor="middle" dominant-baseline="middle">
<tspan font-weight="bold">{{label}}</tspan>
</text>
<text x="50%" y="65%" font-size="150" style="fill: #555555" text-anchor="middle" dominant-baseline="middle">
<tspan font-weight="bold">{{number}}{{isPercent ? '%':''}}</tspan>
</text>
</svg>
2、方法2:通过以下标签嵌入到 HTML 文档中:<embed>、<object> 或者 <iframe>
(1)<embed> :语法 <embed src="circle1.svg" type="image/svg+xml" />
(2)<object> :语法 <object data="circle1.svg" type="image/svg+xml"></object>
(3)<iframe>:语法 <iframe src="circle1.svg"></iframe>
3、链接到SVG文件:a标签,语法 <a href="circle1.svg">查看 SVG 文件</a>