SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics)
SVG 是对图像的形状描述
用法:
1:SVG 文件可以直接插入网页,成为 DOM 的一部分,然后用 JavaScript 和 CSS 进行操作。
<!DOCTYPE html>
<html>
<head></head>
<body>
<svg
id="mysvg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 800 600"
preserveAspectRatio="xMidYMid meet"
>
<circle id="mycircle" cx="400" cy="300" r="50" />
<svg>
</body>
</html>
2:SVG 代码也可以写在一个独立文件中,然后用<img>
、<object>
、<embed>
、<iframe>
等标签插入网页。
<img src="circle.svg">
<object id="object" data="circle.svg" type="image/svg+xml"></object>
<embed id="embed" src="icon.svg" type="image/svg+xml">
<iframe id="iframe" src="icon.svg"></iframe>
3:CSS 也可以使用 SVG 文件。
.logo {
background: url(icon.svg);
}
标签:
SVG 代码都放在顶层标签<svg>
之中
<svg width="100%" height="100%">
<circle id="mycircle" cx="50" cy="50" r="50" />
</svg>
circle>
标签代表圆形
<line>
标签用来绘制直线。
<polyline>
标签用于绘制一根折线。
<rect>
标签用于绘制矩形
<ellipse>
标签用于绘制椭圆。
<polygon>
标签用于绘制多边形。
<path>
标签用于制路径。
<text>
标签用于绘制文本。
<use>
标签用于复制一个形状。
<g>
标签用于将多个形状组成一个组(group),方便复用
<defs>
标签用于自定义形状,它内部的代码不会显示,仅供引用。
<pattern>
标签用于自定义一个形状,该形状可以被引用来平铺一个区域
<image>
标签用于插入图片文件。
<animate>
标签用于产生动画效果。
<animate>
标签对 CSS 的transform
属性不起作用,如果需要变形,就要使用<animateTransform>
标签
今天先到这里明天详细分析