矢量图:
svg:svg意为可缩放矢量图形。它是使用XML格式来定义的图像。通过svg画出来的图形为矢量图,所以svg图像在放大或者改变尺寸的情况下图形的质量不会有所损失。
在 HTML 中嵌入svg图像
除了通过浏览器直接打开svg文件,我们还可以将svg图像嵌入到 HTML 代码里面,示例如下:
<body>
<p>Lorem ipsum dolor sit amet.</p>
<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>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
</body>
或者将 img 标签的 src 属性设置为一个svg文件的路径,如下:
<body>
<p>Lorem ipsum dolor sit amet.</p>
<img src="./1.svg" alt="">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
</body>
svg绘制简单图形:
svg有一些预定义的形状元素,可被开发者使用和操作:
矩形:rect
圆形:circle
椭圆:ellipse
线:line
折线:polyline
多边形:polygon
路径:path
用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">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1; stroke:rgb(0,0,0)"/>
</svg>
代码说明:
rect 元素的 width 和 height 属性可定义矩形的高度和宽度。
style 属性用来定义 css 属性。
css 的 fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值)。
css 的 stroke-width 属性定义矩形边框的宽度。
css 的 stroke 属性定义矩形边框的颜色。
用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>
代码说明:
cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy,圆的中心会被设置为 (0, 0)。
r 属性定义圆的半径。
用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">
<ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/>
</svg>
代码说明:
cx 属性定义圆点的 x 坐标。
cy 属性定义圆点的 y 坐标。
rx 属性定义水平半径。
ry 属性定义垂直半径。
用svg画线条:
<?xml version="1.0" standalone="no"?>
<!