svg笔记总结

一、什么是svg？

svg是一种图像格式（矢量图，就是英文缩小）
svg的优势
1、代码可见，文本编辑器打开即可编辑
2、使用xml格式，可嵌入网页
3、图像大小小
4、可以与js交互

二、如何创建

1、文本创建

就想他的优势一样可直接编写

在程序中便可以直接调用

效果图

2、嵌入创建

书写方式和单独拿出来书写方式一样，但应用方式是通过id，不过这个id有点不稳定

效果图

可以看见我们的img和div并没有生效，说明嵌入html代码中无法通过id,再给其他的元素设置背景图

三、绘制svg方式

我就介绍几个常用的吧

svg默认宽度是300，高度150，我这里不写就是使用默认宽高

1、圆

<circle> 绘制圆，参数也很简单，cx=x轴 cy=y轴 r=半径 范围默认参数是px

<svg>
	<circle cx="100" cy="100" r="50" />
</svg>

2、椭圆

ellipse 和圆的参数差不多，cx=x轴 cy=y轴 rx=x轴半径 ry=y轴半径

<svg>
     <ellipse cx="100" cy="100" rx="25" ry="50" />
</svg>

3、矩形

<rect> 绘制矩阵，x=x轴 y=y轴 width=宽度 height=高度

<svg>
	<rect x="100" y="100" width="120" height="120"/>
</svg>

4、路径

感觉路径是最有用，最万能的。

<path> 参数如下

1. M=移至
2. L =线到
3. H =水平线
4. V =垂直线
5. C =曲线到
6. S =平滑曲线
7. Q =二次贝塞尔曲线
8. T =光滑二次贝塞尔曲线
9. A =椭圆弧
10. Z =封闭路径

大家学习一下就够了，复杂的图形你总不能手绘把，肯定还是用绘图软件啊。

大写和小写是不一样的，小写是相对自己，大写是相对屏幕

举例：

<!--三角形1-->
<svg>
	<path d="M 0 0 L 100 100 L 0 100 Z"/>
<svg>
<!--三角形2-->
<svg>
	<path d="m 0 0 l 100 100 l -100 0 Z"/>
<svg>

虽然两个都是一样的三角形，但是参数却不一样，就是参数小写和大写的区别。

好了下一章我们分析元素如何按照你绘制路径移动，svg好玩的就只有这个和一个模糊了。