H5系列之svg

我不是女神ヾ 2023-08-17 15:24 89阅读 0赞

svg呢，跟canvas其实都是用来画图的，只不过svg画的图，是矢量图，矢量图有个特点是，放大缩小，不会失真，canvas呢，是逐像素进行渲染的。 也就是，他依赖分辨率，会根据分辨率来决定图形是否清晰，还有，svg他毕竟是dom元素，所以他能触发事件，canvas一旦图形被绘制完成，它就不会继续得到浏览器的关注。

首先，使用svg简单的来画一条线。

![1609428-20190825145856120-922984649.png][]

使用line标签，进行画线

![1609428-20190825150322500-995151037.png][]

使用rect标签画矩形

![1609428-20190827194514120-772180630.png][]

所有整个图形，画出来的，都带有填充的，如果我们只是想要矩形的，并不想要填充怎么办呢？

![1609428-20190827195112832-817419204.png][]

使用circle标签画圆

![1609428-20190827195355113-1300450461.png][]

使用ellipse标签画椭圆

![1609428-20190827203444990-691038291.png][]

使用polygon标签，连续画线，折线。

![1609428-20190827204550903-15343592.png][]

使用polygon标签，画多边形，跟上面画折线的参数一样，有区别的是，无论去不去掉填充， 都会闭合图形， 上面折线的，只要你去掉填充，闭合就会消失。

![1609428-20190827205134139-62415484.png][]

path标签的使用：

也是连续画线，比较灵活使用。

![1609428-20190827210432311-631242093.png][]

大写小写的区别呢， 大写，是根据画布的左上角， 也就是画布的原点，进行定位。 小写呢，是根据你当前的位置进行定位。 也就是，大写参考原点，小写参考自身。

大写 绝对定位，0，0点。 小写相对定位， 相对于上个点进行定位。

![1609428-20190827210925512-1203938390.png][]

如果还不懂的话，那么请看下面图解：

![1609428-20190827212406187-1811273383.png][]

除了 M L 还有 H V Z

![1609428-20190827213653165-1506619738.png][]

如果是小写呢， 那他还是一样，根据上个点的位置进行参考。

![1609428-20190827213544290-205502058.png][]

当然，path 不止可以画直线，还可以画弧线。

![1609428-20190827220242306-194406409.png][]

渐变

![1609428-20190827221025929-1444640087.png][]

模糊

![1609428-20190827221929813-51728693.png][]

比例尺，说到比例尺，什么东西上面有比例尺？ 地图就有吧。 1：500 也就是 在地图里面的 1cm 等于真实的 500m 如此。

svg里面呢，也有这么一个东西，应用于svg标签。

![1609428-20190827223842299-1362743733.png][]

最后，有几个属性，设置在css 上面的：

stroke：black stroke-width： 5px； 设置线的 颜色，以及大小

fill: transparent; 　　　　　　　　　 设置填充颜色，transparent是透明

stroke-opacity: 0.5; 　　　　　　　　设置线透明

fill-opacity: 0.5; 　　　　　　　　　 设置填充透明

stroke-linecap: square; round, 设置线结束点的样式，是圆的，还是方的，都会在线的基础上，再添加。

stroke-linejoin: bevel; round,miter 设置线与线相交的样式，斜角，圆角，默认的

troke-dasharray: 10px 20px 30px ......; 定义虚线，第一段虚线为 黑色10px 第二段为 空白 20px 第三段为 黑色30px。。。

stroke-dashoffset: 10px; 把线向左平移

转载于:https://www.cnblogs.com/yanggeng/p/11410008.html

[1609428-20190825145856120-922984649.png]: /images/20230810/72270429215a4b86902db9b803ba790f.png
[1609428-20190825150322500-995151037.png]: /images/20230810/759f63ade35648a68bfc07520b07fb03.png
[1609428-20190827194514120-772180630.png]: /images/20230810/2ef4551d37f447ac90bf60b8f407124e.png
[1609428-20190827195112832-817419204.png]: /images/20230810/6ed8eb016d66429d84fe8103f56db842.png
[1609428-20190827195355113-1300450461.png]: /images/20230810/d1586459edef43c2ae9444bd2f890f8b.png
[1609428-20190827203444990-691038291.png]: /images/20230810/973dd78750bf4d7ebcb59caf2850c9b7.png
[1609428-20190827204550903-15343592.png]: /images/20230810/ee3701da3c6a4e2dbfac28bace1a0e94.png
[1609428-20190827205134139-62415484.png]: /images/20230810/60529b56f820482caa7eae0c6bed2d90.png
[1609428-20190827210432311-631242093.png]: /images/20230810/18fae4fabc574e1eb67c2c6caabb3e79.png
[1609428-20190827210925512-1203938390.png]: /images/20230810/46767f7aa038452797894499fa1aab82.png
[1609428-20190827212406187-1811273383.png]: /images/20230810/fb2bd1d22ab64eddaf50068f39f538d0.png
[1609428-20190827213653165-1506619738.png]: /images/20230810/fcd6bcd5e1974fa688bd22c72093e524.png
[1609428-20190827213544290-205502058.png]: /images/20230810/ba3d846a2d274046ac49b6eb598ee996.png
[1609428-20190827220242306-194406409.png]: /images/20230810/169e00428be64b56a583e79b1215f9ef.png
[1609428-20190827221025929-1444640087.png]: /images/20230810/9fd7cd5a2c7a4f5b9f79a7ef231dda58.png
[1609428-20190827221929813-51728693.png]: /images/20230810/2eed24ad7ebc4e9badb928fa398afbcb.png
[1609428-20190827223842299-1362743733.png]: /images/20230810/e523011b354143d190ba8572454b0e51.png