一、什么是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>
参数如下
- M=移至
- L =线到
- H =水平线
- V =垂直线
- C =曲线到
- S =平滑曲线
- Q =二次贝塞尔曲线
- T =光滑二次贝塞尔曲线
- A =椭圆弧
- 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好玩的就只有这个和一个模糊了。