项目中你常使用的SVG总结

前端开发小马哥
1,347 阅读3分钟

SVG

SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。

语法以及常用标签

1.svg标签

SVG代码都放在顶层标签SVG之中

<svg width="100%" height="100%">
  <circle id="mycircle" cx="50" cy="50" r="50" />
</svg>

svg的width属性和height属性，指定SVG图像在HTML元素中所占据的宽度和高度。如果不指定，默认大小是300px宽，150px高

2.circle标签

circle标签代表圆形

<svg width="300" height="180">
  <circle cx="30"  cy="50" r="25" />
  <circle cx="90"  cy="50" r="25" class="red" />
  <circle cx="150" cy="50" r="25" class="fancy" />
</svg>

上面代码定义了三个圆。circle标签cx,cy,r属性分别为横坐标、纵坐标和半径，单位为像素。坐标都是相对于svg画布的左上角原点。

class属性用来指定对应的css类

.red {
    fill: red;
}
.fancy {
    fill: none;
    stroke: black;
    stroke-width: 3pt;
}

SVG 的 CSS 属性与网页元素有所不同。

  • fill：填充色
  • stroke：描边色
  • stroke-width：边框宽度

3.line标签

line标签用来绘制直线

<line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width:5" />
  • x1：线段起点的横坐标
  • y1：起点纵坐标
  • x2： 终点的横坐标
  • y2：终点的纵坐标
  • style：线段的样式

4.polyline标签

绘制一根折线

<polyline points="3,3 30,28 3,53" fill="none" stroke="black" />

<polyline>的points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。

5.rect标签

绘制矩形

 <rect x="0" y="0" height="100" width="200" style="stroke: #70d5dd; fill: #dd524b" />

<rect>的x属性和y属性，指定了矩形左上角端点的横坐标和纵坐标；width属性和height属性指定了矩形的宽度和高度（单位像素）。

6.ellipse标签

绘制椭圆

<ellipse cx="60" cy="60" ry="20" rx="40" stroke="black" stroke-width="5" fill="silver"/>

<ellipse>的cx属性和cy属性，指定了椭圆中心的横坐标和纵坐标（单位像素）；rx属性和ry属性，指定了椭圆横向轴和纵向轴的半径（单位像素）。

7.polygon标签

绘制多边形

<polygon fill="green" stroke="orange" stroke-width="1" points="0,0 100,0 100,100 0"/>

<polygon>的points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。

8.path标签

制作路径

<path d="  M 18,3  L 46,3  L 46,40  L 61,40  L 32,68  L 3,40  L 18,40  Z"></path>

<path>的d属性表示绘制顺序，它的值是一个长字符串，每个字母表示一个绘制动作，后面跟着坐标

  • M：移动到（moveto）
  • L：画直线到（lineto）
  • Z：闭合路径

9.text标签

绘制文本

<text x="50" y="25">Hello World</text>

<text>的x属性和y属性，表示文本区块基线（baseline）起点的横坐标和纵坐标。文字的样式可以用class或style属性指定。

10.use标签

复制一个形状

<circle id="myCircle" cx="5" cy="5" r="4"/>
<use href="#myCircle" x="10" y="0" fill="blue" />
<use href="#myCircle" x="20" y="0" fill="white" stroke="blue" />

<use>的href属性指定所要复制的节点，x属性和y属性是<use>左上角的坐标。另外，还可以指定width和height坐标。

11.g标签

用于将多个形状组成一个组(group),方便复用

<g id="myCircle">
    <text x="25" y="20">圆形</text>
    <circle cx="50" cy="50" r="20" />
</g>
<use href="#myCircle" x="100" y="0" fill="blue" />
<use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />

12.defs标签

用于自定义形状。它内部的代码不会显示，仅供引用

13.image标签

用于插入图片文件

<image xlink:href = "img_submit.gif"  width="20%" height="20%"/>

<image>的xlink:href属性表示图像的来源。

14.animate标签

产生动画效果

<rect x="0" y="0" width="100" height="100" fill="#feac5e">
  <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
</rect>

矩形会在水平反向上不断移动，产生动画效果。

  • attributeName：发生动画效果的属性名。
  • from：单次动画的初始值。
  • to：单次动画的结束值。
  • dur：单次动画的持续时间。
  • repeatCount：动画的循环模式。

定制多个animate

<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
<animate attributeName="height" to="500" dur="2s" repeatCount="indefinite" />

15.animateTransform标签
<rect x="250" y="250" width="50" height="50" fill="#4bc0c8">
  <animateTransform attributeName="transform" type="rotate" begin="0s" dur="10s" from="0 200 200" to="360 400 400"
  repeatCount="indefinite" />
</rect>

<animateTransform>的效果为旋转（rotate），这时from和to属性值有三个数字，第一个数字是角度值，第二个值和第三个值是旋转中心的坐标。from="0 200 200"表示开始时，角度为0，围绕(200, 200)开始旋转；to="360 400 400"表示结束时，角度为360，围绕(400, 400)旋转。

关于SVG其实跟canvas差不了多少，都是可以做一下复杂的图形和动画效果。SVG的入门教学先写到这里。如果有同学在公司用到了SVG的高级特效，可以参考MDNSVG。

avatar
文章
阅读
粉丝