HTML5 svg画布

客官°小女子只卖身不卖艺 2023-06-23 05:58 6阅读 0赞

### svg画布 ###

*   *  创建（svg）
     *  线条（line）
     *  获取属性
     *  修改属性
     *  创建矩形（rect）
     *  创建圆形（circle）
     *  创建椭圆（ellipse）
     *  创建线条（polyline）
     *  Javascript绘制svg图像

说起画布，我在上周更新了一篇 [HTML5 canvas画布][HTML5 canvas]canvas画布，里面也介绍了canvas与svg的区别，今天就不在重复，需要的的小伙伴可以去查看。

## 创建（svg） ##

废话不说，我们来创建一个svg

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0_size_16_color_FFFFFF_t_70]  
可以看到我们的svg和canvas一样，他们都这自己的默认宽高度，并且都是300\*150。

## 线条（line） ##

svg创建完成后，我们绘制元素与canvas有所不同，svg创建元素是在内直接使用标签创建的。**（注意此时的标签并不属于HTML）**，让我们来创建一个线条来看看效果

![在这里插入图片描述][20191217185905977.png]

## 获取属性 ##

此时的标签会在DOM结构中现实出来，我们我们可以去获取元素并且更改他们吗？

document.getElementsByTagName('line')

![在这里插入图片描述][2019121719013114.png]  
元素获取到再来尝试一下获取元素的`x1`属性  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0_size_16_color_FFFFFF_t_70 1]  
我们发现我们并没有获取到元素的属性，而是返回了一个对象。  
此时我想起了**svg的元素并不是属于HTML的**，那么是不是应为不能够使用HTML DOM操作呢？我们换一种方式获取下元素的属性。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0_size_16_color_FFFFFF_t_70 2]

## 修改属性 ##

我们成功的获取到了元素的属性，接下来对他进行修改操作  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0_size_16_color_FFFFFF_t_70 3]  
和canvas不一样的是当我进行修改属性的时候，svg图像直接发生了改变；**原来svg里创建的图形都是一个对象，当对象的属性值发生改变时，svg的图像也随之改变。**

## 创建矩形（rect） ##

![在这里插入图片描述][20191217191621613.png]

## 创建圆形（circle） ##

![在这里插入图片描述][20191217191845567.png]

## 创建椭圆（ellipse） ##

![在这里插入图片描述][20191217192038773.png]

## 创建线条（polyline） ##

![在这里插入图片描述][20191217192208735.png]  
我们发现他被填充了，如果我们不想让他被填充该怎么办呢？  
这个时候我们只需要设置将填充的颜色设置为透明色就可以实现不填充了。

![在这里插入图片描述][20191217192404848.png]

## Javascript绘制svg图像 ##

在实际开发中，我们经常会使用动态创建的方法绘制图像

var rect = document.createElement('rect');
    rect.setAttribute('width',20);
    rect.setAttribute('height',20);
    rect.setAttribute('x',20);
    rect.setAttribute('y',20);
    rect.setAttribute('fill','red');
    svg.append(rect)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0_size_16_color_FFFFFF_t_70 4]  
创建一个矩形，设置了属性宽高和填充的颜色，页面上也追加上去了，为什么现实不出来呢？  
原来**svg的元素并不是属于HTML的**，所有每次创建的时候我们需要为这些元素设置命名空间。

var rect = document.createElementNS('http://www.w3.org/2000/svg','rect');
    rect.setAttribute('width',20);
    rect.setAttribute('height',20);
    rect.setAttribute('x',20);
    rect.setAttribute('y',20);
    rect.setAttribute('fill','red');
    svg.append(rect)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0_size_16_color_FFFFFF_t_70 5]

[HTML5 canvas]: https://blog.csdn.net/qq_39157944/article/details/103536721
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/201912171846529.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0,size_16,color_FFFFFF,t_70
[20191217185905977.png]: https://img-blog.csdnimg.cn/20191217185905977.png
[2019121719013114.png]: https://img-blog.csdnimg.cn/2019121719013114.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191217190447980.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191217190738627.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191217190941673.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0,size_16,color_FFFFFF,t_70
[20191217191621613.png]: https://img-blog.csdnimg.cn/20191217191621613.png
[20191217191845567.png]: https://img-blog.csdnimg.cn/20191217191845567.png
[20191217192038773.png]: https://img-blog.csdnimg.cn/20191217192038773.png
[20191217192208735.png]: https://img-blog.csdnimg.cn/20191217192208735.png
[20191217192404848.png]: https://img-blog.csdnimg.cn/20191217192404848.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191217193133671.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191217193440596.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0,size_16,color_FFFFFF,t_70