HTML5内联SVG

梦里梦外; 2022-08-23 09:57 158阅读 0赞

1.SVG是可伸缩矢量图形（Scalable Vector Graphics）,用于定语网络的矢量图形，使用XML格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失。  
**优势：**  
与其他图像格式相比（jpeg和gif）

1.图像通过文本编辑器来创建和修改
    2.图像可以被搜索，索引，脚本化或压缩
    3.可伸缩的
    4.图像在任何分辨率下呗高质量的打印
    5.图像质量不下降的情况下被放大

2.SVG与Canvas两者间的区别

SVG使用XML描述二维的图像的语言
    Canvas通过javascript来绘制二维图形
    SVG基于XML，这意味着SVG DOM中每个元素都是可用的，可以为某个元素附加javascript事件处理器
    在SVG中，每个被绘制的图形都被视为对象。如果对象的属性发生变化，那么浏览器能够自动重现图形。
    Canvas是逐个像素渲染的，一旦被绘制完成，不会继续得到浏览器的关注。如果位置发生变化，整个场景也需要重新绘制。

![这里写图片描述][20160613215514533]  
3.在页面中添加SVG  
内联方式：

外联方式：通过`<img>`元素，在html中导入外部svg文件，缺点是无法编写与svg元素进行交互的脚本。

4.svg绘制图形  
矩形：x,y为起点的位置，然后定义宽和高  
![这里写图片描述][20160614085951061]

svg绘制对象是按对象在文档中出现的顺序进行的。如果画完矩形之后画圆形，那么圆形会显示在矩形之上。  
![这里写图片描述][20160614090400081]

![这里写图片描述][20160613215652143]

6.变换svg元素  
svg中可以将多个元素结合起来。使他们形成一个组，变为一个整体。  
`<g>`元素代表组，可以用来结合多个相关的元素。组内成员可以通过ID来引用。此外，组也可以作为一个整体进行变换，如果你为组添加了变换属性，那么组中所有内容都会进行变换。变换属性包括旋转，变形，缩放，剪切。  
![这里写图片描述][20160614090933182]

7.复用内容  
svg中的`<defs>`元素用于定义留待将来使用的内容。可以用`<use>`元素将`<defs>`定义的内容链接到需要展示的地方。借助这两个元素，可以多次复用同一内容，消除冗余。  
![这里写图片描述][20160614091809584]

8.文本

[20160613215514533]: /images/20220721/0c06140cf01241ed81dec5fc158de084.png
[20160614085951061]: /images/20220721/6d33b10e93e34876a7e82bcaf1c41c6e.png
[20160614090400081]: /images/20220721/104b14b324b94884afb9a903f6ef4fd6.png
[20160613215652143]: /images/20220721/f87cb6ed7eab48b48735e0cdd6d6ca62.png
[20160614090933182]: /images/20220721/77369816651041afa9bc9599657980ec.png
[20160614091809584]: /images/20220721/d112b99c81a04cce9621ebadef1ba3b0.png