本文介绍了SVG的基本概念，包括其作为XML格式的定义、坐标系、颜色模型以及SVG中的特殊元素如foreignObject。SVG的特性允许在web上创建高质量、可缩放的矢量图，并支持文本自动换行和将DOM元素转化为图片。同时，讨论了svg标签的重要属性如viewport、viewBox和preserveAspectRatio，以及如何通过CSS样式控制SVG元素。文章还详细阐述了填充、边框、透明度和字体等样式属性的使用方法。
一、前言
1、SVG(Scalable Vector Graphics)可伸缩矢量图形
特点：
（1）使用xml格式来定义图形；
（2）用来定义web上的使用的矢量图；
（3）改变图像尺寸，图片质量不受损；
（4）所有元素属性可以使用动画；
（5）继承了W3C标准，在html中使用方式，html直接嵌入svg内容，或者直接引入svg文件。
/* svg标签，这里的rect为矩形，在后面的图形元素中会详细说明 */
<svg width="200" height="200">
<rect width="20" height="20" fill="red"></rect>
</svg>
/* 引入后缀名为.svg的文件 */
<img src="demo.svg" alt="测试svg图片">注意：svg为inline水平元素。且需要绘制的所有图形都应被包含在<svg></svg>标签内。
2、SVG坐标系
特点:（1）y轴向下；（2）顺时针方向的角度是正值。
注意：元素的所有操作都是相对自身坐标系进行的
3、颜色RGB和HSL
RGB: 三个分量：红色、绿色、蓝色，每个分量的取值范围[0, 255]，优点是显示器更容易解析。
HSL: 三个分量：颜色h、饱和度s%、亮度l%，每个分量的取值范围分别是[0, 359], [0, 100%], [0, 100%],，其中，h=0表示红色， h=0表示120绿色，h=0表示240 蓝色。
基于HSL的配色方案：http://paletton.com/
二、特殊元素
1、foreignObject
foreignObject元素通常被用来在svg代码中嵌入html节点。注意：该属性对IE不支持。<foreignObject>元素的作用是可以在其中使用具有其它XML命名空间的XML元素，换句话说借助<foreignObject>标签，我们可以直接在SVG内部嵌入XHTML元素。通常会与标签一起使用，在用户浏览器不支持时，告知用户。
举个例子：
<svg xmlns="http://www.w3.org/2000/svg">
<foreignObject width="120" height="50">
<body xmlns="http://www.w3.org/1999/xhtml">
<p>文字测试foreignObject的功能</p>
</body>
</foreignObject>
</svg>可以看到<foreignObject>标签里面有一个设置了xmlns="http://www.w3.org/1999/xhtml"命名空间的<body>标签，此时<body>标签及其子标签都会按照XHTML标准渲染，实现了SVG和XHTML的混合使用。
这种混合特性有什么作用呢？作用很多，其中之一就是轻松实现SVG内的文本自动换行。
1.1文本自动换行
SVG要实现文本换行，往往需要手动阻断
<svg xmlns="http://www.w3.org/2000/svg">
<text font-size="12">
<tspan x="0" y="10">一段需要word wrap</tspan>
<tspan 
最低0.47元/天 解锁文章
扫一扫
365
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
