HTML基础与SVG

html 基础

1 标题标签。

h1在最大，h6最小。

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
...
<h6>这是一个标题</h6>

---

2 段落标签。

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

---

3 图片标签。

属性	描述
src	图片路径
alt	当图片加载失败的时候才会显示
title	鼠标滑过时才会显示，不占据页面空间

<img 
     src='图片路径' 
     alt='当图片加载失败的时候才会显示'
     title='鼠标滑过时才会显示，不占据页面空间'
     />

<img src="/images/logo.png" width="258" height="39" />

相对路径：根据文件和文件夹之间的关系，来确定文件查找途径。

绝对路径：从根目录开始通过完整的路径定义来查找资源的。

计算机中图片的 存储格式 有很多种：

bmp、jpg、jpeg、png、tif、gif、svg、psd、wmf、webp等

实际开发中，网页能够使用的图片格式是有限的：

图片格式	描述
gif	是以8位颜色和256位颜色存储的图像数据，gif图片支持透明、压缩、交错和多图像图片。是无损压缩，缺点是最多256色，画质查。
jpg	支持最高级别的压缩，支持上百万种颜色。从而用来表现照片。
jpeg	是一种有损压缩格式，可以 使图片下载时间更短。但图像的压缩比例非常大时，会使图片失真质量下降。
png	是一种新的无显示质量损耗的文件格式，汲取了GIF和JPEG二者的优点，存储形式丰富，兼有GIF和JPEG的色彩模式，PNG格式还能把图像文件大小压缩到极限。利于网络的传输却不失真。
bmp	常用于网站注册或登录时页面中的验证码，一般是由网站程序自动生成的bmp格式小图片。bmp文件通常是不压缩的，所以文件要大很多。
webp	是一种同事提供了有损压缩和无损压缩的图片文件格式，是由谷歌公司专门针对谷歌浏览器研发出来的一种图片格式，在谷歌 浏览器中经常使用。

这些图片格式的区别和应用场景：

最终要的区别就是图片存储的时候 是否进行压缩，是有损压缩还是无损压缩。

有损压缩：是对图像本身的改变，在保存图像时保留了较多的亮度信息，而将色相饱和度的信息和周围的像素进行合并。合并的比例不同，压缩的比例也不同。由于信息量减少了，所以压缩比可以很高。图像的质量也会响应的下降。有损压缩可以减少图像在内存和磁盘中占用的空间。在屏幕上观看时，不会发现对图像的外观产生很大的不利影响。

无损压缩：是最文件本身的压缩，和其它数据文件的压缩一样，对于数码图像而言也就不会使图像细节有任何损失。是可以完全还原的。无损压缩不能减少图像在内存和磁盘中占用的空间，压缩率也比较低。

---

4 超链接。

又称为：a标签（anchor）

属性	描述
href	带有 href 属性的a标签默认样式是蓝色的，并且带有下划线效果。 鼠标滑过时指针编程小手，点击页面即会跳转至href中的目标地址
target	作用的定义超链接页面的打开方式。_self代表在当前页面打开。_blank 代表在空白页面打开（新的页面）。

<a href = '目标页面的地址' target = '_blank'> 双标签内的内容就是显示在页面中的内容 </a>

---

5 锚点。

又称为：命名标记。就像一个定个位器，是页面内的超链接，用来实现同一个页面中不同区域的跳转。

需要两个步骤：

5.1 跳转目标的定义（给目标位置 添加 id ）

<p id = 'box1'>
	在跳转目标的位置处，给对应的标签添加一个 id 属性，并且添加属性值，属性值即是 锚点的名字。
    名字要遵循文件和文件夹的命名规则。
    需要注意的是：以为一个锚点只能跳转到一个位置，所以 id 的属性值不能重复出现。
</p>

5.2 锚点的定义（ 添加 href ）

<a href = '#box1'>
	需要给跳转目标定义一个相应的超链接。
    并且给他添加 href 属性，属性值是： # + 锚点的名称
</a>

---

6 文本修饰常用标签。

6.1 文本加粗：

<b>
    b 标签仅仅是为了加粗显示文本。
</b>

<strong>
   strong 语义化更强，表示该文本比较重要。（阅读设备阅读网页时，strong会重读。）
</strong>

6.2 文本倾斜：

<i>
   i 标签仅仅为了让文字倾斜。
</i>

<em>
	em 标签不仅能让文字倾斜，还可以加强语气。
    百度等搜索引擎的爬虫爬取我们的页面时，特别收录em中的文本，以便别人从百度搜索em里包含的关键词时，让我们的页面优先曝光。
</em>

6.3 删除线：

<s>
	HTML5 已经不支持 s 标签了，所以建议使用 del 标签。
</s>

<del>
	建议使用 del 标签。
</del>

6.4 下划线：

<u>
	下划线
</u>

6.5 上、下角标标签：

<sup>
	上角标签。
</sup>

<sub>
	下角标签
</sub>

7 快速创建标签。

Emmet语法

    <!-- 1. 创建一个标签并且标签里面有文本：h1{这是一级标签} -->
    <h1>这是一级标签</h1>

    <!-- 2. 创建多个相同的标签，并且标签里面有文本：h1{这是多个一级标签}*4 -->
    <h1>这是多个一级标签</h1>
    <h1>这是多个一级标签</h1>
    <h1>这是多个一级标签</h1>
    <h1>这是多个一级标签</h1>

    <!-- 3. 创建多个不同标题标签并且里面有文本：h${这是$级别的标题}*6 -->
    <h1>这是1级别的标签</h1>
    <h2>这是2级别的标签</h2>
    <h3>这是3级别的标签</h3>
    <h4>这是4级别的标签</h4>
    <h5>这是5级别的标签</h5>
    <h6>这是6级别的标签</h6>
 
    <!-- 4. 嵌套结构标签：ul>li{这是ul里面的li}*5 -->
    <ul>
      <li>这是ul里面的li</li>
      <li>这是ul里面的li</li>
      <li>这是ul里面的li</li>
      <li>这是ul里面的li</li>
      <li>这是ul里面的li</li>
    </ul>

---

8 有序列表。

有顺序的列表 。

属性	描述
type	属性设置列表的项目符号种类，五种 type 属性：
	A 大写英文字母顺序：A、B、C、D…
	a 小写英文字母顺序
	I 罗马数字顺序
	i 罗马数字顺序
	1 阿拉伯数字顺序
start	属性修改起始序号

<ol type='A' start='6'>
    <l1>把冰箱门打开</l1>
    <l1>把大象装进去</l1>
    <l1>把冰箱门关上</l1>
</ol>

ol 只能嵌套 li，如果需要嵌套其他标签，则需要放到 li里面。

---

9 无序列表。

属性	描述
type	属性用来设置无序列表的项目符号，属性值有四个：
	disc 实心圆点，默认值为 disc
	circle 空心圆点
	square 实心方块
	none 隐藏项目符号

<ul>
    <l1>无顺序</l1>
    <l1>无顺序</l1>
    <l1>无顺序</l1>
</ul>

---

10 自定义列表。

<dl>
    <dt>列表标题</dt>
    <dd>列表元素</dd>
    <dd>列表元素</dd>
    <dd>列表元素</dd>
</dl>

> dt 一般定义一个，为标题标签。dd 可以定义多个
> dt 和 dd 为兄弟标签
> dt 或 dd 标签是不能脱离 dl 单独使用的。

---

11 表格。

11.1 表格 table 属性：

属性	描述
border	定义表格线条的粗细
width	定义表格宽度
height	定义表格高度
cellspacing	定义单元格之间的距离
cellpadding	定义单元格边框和文本之间的距离
align：left \ center \ right	定义表格在页面中水平方向的对齐方式
bgcolor	定义表格的背景颜色
bordercolor	修饰边框的颜色

11.2 行 tr 属性：

属性	描述
height	行的高度
aligh：left \ center \ right	设置 tr 内部所有单元格的 水平对齐 方式
valigh：top \ middle \ bottom	设置 tr 内部所有单元格的 垂直对齐 方式
	没有宽度属性

11.3 单元格 td 属性：

属性	描述
width	单元格的宽度
height	单元格的高度
aligh：left \ center \ right	单元格内容的 水平对齐 方式
valigh：top \ middle \ bottom	单元格内容的 垂直对齐 方式
bgcolor	单元格的背景颜色

<table 
       border='1'
       width='500'
       height='400'
       cellspacing='0'
       cellpadding='0'
       align='center'
       >
    <tr 
        height='100'
        aligh='right'
        valigh='bottom'
        >
    	<th>表格标题，样式加粗居中显示</th>
    	<th>表格标题，样式加粗居中显示</th>
    	<th>表格标题，样式加粗居中显示</th>
    </tr>
   	<tr>
    	<td
			height='100'
            aligh='left'
        	valigh='top'
            >第一个单元格</td>	
    	<td>第二个单元格</td>	
    	<td>第三个单元格</td>	
    </tr>
</table>

11.4 合并单元格：td

rowspan 合并 行
colspan 合并 列

<table width='600' height='400' border='1'>
    <tr>
    	<td rowspan='4'></td>
		...
    </tr>
    ...
</table>

11.5 表格 caption 标题：

一般习惯放在第一个 tr 标签之前

<table>
	<caption>表格标题</caption>
	<tr></tr>
</table>

11.6 结构分组：thead tbody tfoot

行分组：

一个表格只允许使用一个 thead 和一个 tfoot，但允许使用多个 tbody

<table>
	<caption>表格标题</caption>
    <thead></thead>
    <tbody></tbody>
    <tfoot></tfoot>
</table>

列分组：

span 属性表示规定多少列为1组。

如果需要划分多组，则需要使用多个 colgroup 标签 。

<table>
    <caption>表格标题</caption>
    <colgroup span='1' bgcolor='blue'></colgroup>
    <thead></thead>
    <tbody></tbody>
    <tfoot></tfoot>
</table>

---

12 颜色值。

颜色是结合 红、绿、蓝 三色光来显示的。

在网页中表示颜色的方式有多种：颜色名称、十六进制值、RGB值等等。

表示颜色的方式	描述
颜色名称	是指使用颜色的 英文单词 来定义颜色值。如：Red(红色)、Blue(蓝色)、Tomato(番茄色)等等有140种标准的颜色名称。
十六进制值	指使用 #RRGGBB 的形式来定义的颜色值。如：#0000FF(蓝色)。
RGB值	指使用 RGB(red, green, blue) 的形式来定义的颜色值。如：RGB(0, 0, 255)，也是蓝色，每个参数都定在0-255之间的整数，中间以逗号隔开。

---

13 长度单位。

13.1 绝对长度单位

固定的，用这些单位表示的长度会显示为设置的尺寸。

如：厘米(cm)、毫米(mm)、英寸(in)、px(pixel)。其中，px 表示像素，是网页中最常用的长度单位。

对于 低分辨率设备，1px 就是显示器的一个设备像素。
对于 高分辨率设备，1px 意味着多个设备像素。

13.2 相对长度单位

指相对于一个长度计算出来的长度，一般用于适配不同的设备。

比如 百分比(%)：是相对于父元素的长度，根据设置的百分比计算出来的新值。

---

14 块级元素和内联元素。

每个HTML元素都有两个显示值：block(块)、inline(内敛)

元素类型	描述
块级元素	独占一行，占据可用的全部宽度。例如：P标签、div等等
内联元素	不会独占有一行。例如：span、b、i、em、strong等等

---

15 表单。

15.1 单行文本框 input

常见的文本框和密码框都是使用的单行文本框控件。 文本框，即是让用户输入内容的区域。

input 属性：

属性	描述
type	text \ password \ number 等等

<form >
  请输入用户名：<input type="text" />
  <br />
  请输入密码：<input type="password" />
</form>

15.2 多行文本框 textarea

多行文本框控件也称为文本域。

多行文本框相对于单行文本框而言，允许用户输入多行文本，文本触达右侧边界后会自动换行，文本超出底部边界后会产生滚动条。

textarea 属性：

属性	描述
cols	指定一个文本区域的可见宽度（文字的个数 ）
rows	指定一个文本区域的可见行数

<form >
	个人信息：<textarea cols="10" rows="3"></textarea>
</form>

15.3 单元和多选 radio | checkbox

通过设置 input 标签的 type 属性值来实现单选和多选。

单选框控件必须成组使用才有意义，每组至少需要两个单选框。

“组“ 是通过 name 属性来建立的，凡是 name 值相同的就是一组。

同组的单选框，只有一个会处在选中的状态，其他的会自动呈现为未选中状态。

如果没有给单选框设置 name 属性，则会默认每个单选框自成一组。

input 属性：

属性	描述
type	'radio' 单选
	'checkbox' 多选
checked	默认选中。属性值只要是非空字符串都可以，或者不加属性值也可

<form >
    
  性别：<input type="radio" name="gender" checked = "checked " />男
  		<input type="radio" name="gender" />女

  前端基础：<input type="checkbox" checked>HTML
  			<input type="checkbox">CSS
 			 <input type="checkbox">JS
</form>

15.4 下拉菜单 select > option

select 属性：

属性	描述
mutiple	允许用户选择一个以上的值。使用 ctrl 配合鼠标键，选择多个值 。
size = "8"	定义控件的默认可见行数。

option 属性：

属性	描述
selected	可以指定默认显示某一项。默认显示第一个。

<form >
   <select>
    <option>1991</option>
    <option>1992</option>
    <option>1993</option>
    <option>1994</option>
    <option selected>1995</option>
    <option>1996</option>
    <option>1997</option>
    <option>1998</option>
    <option>1999</option>
  </select>
    
   <select multiple>
    <option>音乐</option>
    <option>电影</option>
    <option>滑板</option>
    <option>台球</option>
    <option>钓鱼</option>
    <option>旅游</option>
    <option>上班</option>
  </select>
</form>

15.5 文件选择 file

input 属性：

属性	描述
type = 'file'	文件选择

<form >
  附件：<input type="file">
</form>

15.6 label 标签

label 作用：点击 label 内的文本时，光标会切换到与label关联的表单控件 。

label 属性：for <==> id

属性	描述
for	用来定义与 label 关联的表单控件，值为表单控件的 id 属性值。

<form >
	<label for="username">请输入用户名：</label>
    <input id="username" type="text" />
</form>

15.7 只读和禁用 redonly | disabled

input 属性：

属性	描述
value	作用是给输入框一个默认值
redonly	只读
disabled	禁用

<form >
	您的手机号：<input type="text" value="15577778888" readonly />
	性别：<input type="radio" name="gender" checked="checked " />男
      	<input type="radio" name="gender" />女
      	<input type="radio" name="gender" disabled/>保密
</form>

15.8 表单分组 fieldset > legend

fieldset 字段集的意思，legend 说明的意思。

<fieldset>
  <legend>基本信息</legend>
  请输入用户名：<input id="username" type="text" />
  <br />
  请输入密码：<input type="password" />
</fieldset>

15.9 表单按钮

共分为五类：提交按钮、重置按钮、普通按钮、图像按钮、双标签button按钮。

input 属性 type 值：

属性	描述
submit	提交按钮
reset	重置按钮
button	普通按钮
image	图像按钮
<button></button>	双标签button按钮

15.9.1 提交按钮

<input type="submit" />

15.9.2 重置按钮

点击重置按钮，表单内输入的数据就会清空了。

<input type="reset" />

15.9.3 普通按钮

一个普通按钮是没有任何功能的。

<input type="button" value="普通按钮"/>

默认该按钮是没有名称的，value属性可以设置按钮的名称。其他类型按钮也可以

15.9.4 图片按钮

该按钮的功能和提交按钮一样，只是用图片代替了提交按钮的外观。

<input type="image" src="../beyou.jpeg"/>

15.9.5 双标签 button按钮

也能实现表单的提交功能。

<button>button按钮</button>
<button type="button">button按钮</button>
<button type="reset">button按钮</button>
<button type="submit">button按钮</button>

双标签button按钮在form里，默认具备提交表单的功能。
如果为它添加了type属性，值为button，就变成了普通按钮。

15.10 form 属性：

属性	描述
action	行动的意思，点击提交按钮后做什么动作，事实上值就是服务器的地址。如果不定义action，浏览器默认会将当前的页面地址当成action的值。
target	属性值和链接的target属性值一样。可以是_blank 也可以是 _self
method	指定提交请求的方式。
	get 是默认值，浏览器会把收集好的表单数据，加到服务器地址的后面，提交给服务器。
	post 值不但能收集表单的数据，而且不会在地址栏里暴露隐私数据。

<form action="http://www.baidu.com" target="_blank">
  姓名：<input type="text" />
  <br />
  邮箱：<input type="text" />
  <br />
  <input type="submit" />
</form>

当点击提交按钮时，发生了三件事：
	1 页面刷新了
点击提交按钮，数据提交给了网站的后台服务器，后台服务器再将数据保存到数据库中，
这里的服务器会给网页的表单提供一个访问地址。
	2 输入框的内容消失了
	3 浏览器地址栏里多了一个问号

15.11 表单数据采集和提交

<form action="" method="post">
    手机号：<input type="text" name="pnumber">
    密码：<input type="password" name="password">
    <input type="submit" value="登录">
</form>

---

16 实用的标签。hr pre map

16.1 hr 水平线

作用是在网页上画出一条水平分割线。

属性	描述
width	控制水平线的宽度
size	控制水平线的高度
color	定义水平线的颜色
align	调整水平线水平对齐方式
noshade	用来去掉水平线阴影

<hr
	width='控制水平线的宽度'
	size='控制水平线的高度'
	color='定义水平线的颜色'
	align='调整水平线水平对齐方式'
	noshade='用来去掉水平线阴影'
>	

16.2 pre 预格式化的文本

pre 元素里的文本以固定宽度的字体显示。（编辑器里显示的什么样页面中就显示什么样）

<pre>
	床前明月光，
	疑是地上霜。
	举头望明月，
	低头思故乡。
</pre>

16.3 map 定义一个图像映射

图像映射就是一个图片的热点链接，点击图片不同区域实现链接页面的跳转。

map 属性：

属性	描述
name	是必须的，与img标签 的usemap属性相关联，在图像和地图之间创建关系。

area 标签，是一个单标签。用于定义图片上的热点区域，实现相应区域的目标跳转。

通过 area 标签，可以设置热点区域的位置、大小及形状。

area 属性：

属性	描述
href	用来定义热点区域链接的目标地址
shape	用来定义区域的形状。default、rect、circle、poly
coords	用来定义 可点击区域的坐标，需要配合shape使用

<map >
    <area href = "用来定义热点区域链接的目标地址"
          shape = "用来定义区域的形状。default、rect、circle、poly"
          coords = "用来定义 可点击区域的坐标，需要配合shape使用"
          >
</map>

---

17 iframe 内嵌页面

作用：用来在一个网页中显示另一个网页。（嵌套页面）

属性：

属性	描述
src	资源，用于引入其他网站的页面。值是一个页面的路径。
width	宽度，用来控制引入页面的宽度。值是一个数字。
height	高度
frameborder	框架边框的意思，默认引入的框架带有边框。将该属性值设置为 0，取消框架的边框。
scrolling	滚动，用来控制是否显示框架的滚动条。值有三个：
	anto 在需要的情况下出现滚动条，也是默认值
	yes 始终显示滚动条
	no 从不显示滚动条

<div>
  <a href="https://arco.design/" target="iframe_a"><b>arco.design</b></a>
  <a href="https://www.bilibili.com/" target="iframe_a"><b>哔哩哔哩</b></a>
  <a href="https://www.mgtv.com/?lastp=so_result" target="iframe_a"><b>芒果tv</b></a>
</div>
<iframe
  src="https://arco.design/"
  frameborder="0"
  width="800"
  height="600"
  name="iframe_a"
></iframe>

---

18 SVG。

18.1 初始 SVG

SVG 是基于XML语法的图像格式。即 可缩放矢量图 。

用手机拍摄的照片，图片格式一般都是基于像素处理的，图片放大，会模糊失真。

SVG 则是属于对图像的 形状描述，本质上是文本文件，体积较小。
无论放大多少遍，都不失真。

SVG 标签是 SVG 图形的一个容器，是一个双标签，定义画布。

svg 属性：

属性	描述
width	定义画布的 宽度
height	定义画布的 高度

<svg width="800" height="600"></svg>

svg 有一些预定义的形状元素：

18.2 rect 矩形

属性	描述
width	宽度
height	高度
fill	矩形的填充颜色
fill-opacity	填充颜色的不透明度，值范围0到1
stroke	边框的颜色
stroke-width	边框宽度
stroke-opacity	描边颜色的不透明度，值范围0到1
x	矩形的左边位置
y	矩形的顶部位置
opacity	整个图形的透明度
rx	圆角x轴方向的半径长度
ry	圆角y轴方向的半径长度
rx 和 ry 两个值若相等	则是一个圆角；否则是一个椭圆形的角

<svg width="400" height="110">
  <rect
    width="300"
    height="100"
    fill="blue"
    stroke-width="3"
    stroke="black"
  />
</svg>
<br>
<svg width="400" height="180">
  <rect
    x="50"
    y="20"
    width="150"
    height="150"
    fill="blue"
    fill-opacity="0.1"
    stroke="tomato"
    stroke-opacity="0.9"
    stroke-width="5"
  />
</svg>

圆角矩形
<svg width="400" height="180">
  <rect
    x="50"
    y="20"
    width="150"
    height="150"
    fill="red"
    stroke="black"
    stroke-width="5"
    opacity="0.5"
    rx="20"
    ry="20"
  />
</svg>

18.3 circle 圆形

属性	描述
cx	圆形中心的 x 坐
cy	圆形中心的 y 坐标
	如果省略了 cx 和 cy 圆形的中心会被设置为 (0,0)
r	圆的半径
fill	背景色填充
stroke	边框颜色
stroke-width	边框宽度

<svg width="100" height="100">
  <circle
    cx="100"
    cy="100"
    r="40"
    stroke="red"
    stroke-width="3"
    fill="pink"
  />
</svg>

18.4 ellipse 椭圆

属性	描述
cx	椭圆中心的 x 坐标
cy	椭圆中心的 y 坐标
rx	水平半径
ry	垂直半径

<svg width="600" height="240">
  <ellipse
    cx="160"
    cy="100"
    rx="100"
    ry="80"
    stroke="purple"
    stroke-width="3"
    fill="yellow"
  />
</svg>

将多个椭圆堆叠在一起
<svg width="500" height="150">
  <ellipse cx="240" cy="100" rx="220" ry="30" fill="purple" />
  <ellipse cx="220" cy="70" rx="180" ry="20" fill="lime" />
  <ellipse cx="200" cy="40" rx="160" ry="15" fill="pink" />
</svg>

空心椭圆
<svg width="500" height="100">
  <ellipse cx="240" cy="50" rx="220" ry="30" fill="yellow" />
  <ellipse cx="220" cy="50" rx="190" ry="20" fill="white" />
</svg>

18.5 line 线条

属性	描述
x1	x 轴上直线的起点坐标
x2	x 轴上直线的末端坐标
y1	y 轴上直线的起点坐标
y2	y 轴上直线的末端坐标
stroke	线条的颜色
stroke-width	线条颜色的宽度

<svg width="500" height="210">
	<line x1="0" x2="200" y1="0" y2="200" stroke="blue" stroke-width="4" />
</svg>

18.6 polyline 多线条

可以创建任何只由直线组成的形状，一般是把几个点链接起来，不要求封闭。

属性	描述
points	定义绘制图线所需要的点，也就是两个以上的 x 和 y 坐标对。
fill = "none"	表示不填充任何颜色

<svg width="500" height="210">
  <polyline
    points="20,20 40,25 60,40 80,120 120,140 200,180"
    fill="none"
    stroke="purple"
    stroke-width="1"
  />
</svg>

<svg width="500" height="180">
  <polyline
    points="0,40 40,40 40,80 80,80 80,120 120,120 120,160 160,160"
    fill="none"
    stroke="purple"
    stroke-width="4"
  />

18.7 polygon 多边形

用来创建一个至少有 3 条边的图像，多边形是由直线组成的，形状是封闭的。

属性	描述
points	定义了多边形每个角的 x和 y 的坐标。值至少要三对坐标。

三边形
<svg width="500" height="210">
  <polygon
    points="200,20 250,190 160,210"
    fill="lime"
    stroke="purple"
    stroke-width="1"
  />
</svg>

四边形
<svg width="500" height="210">
  <polygon
    points="200,20 250,190 160,210"
    fill="lime"
    stroke="purple"
    stroke-width="1"
  />
</svg>

五角星
<svg width="500" height="210">
  <polygon
    points="100,10 40,198 198,78 10,78 160,198"
    fill="lime"
    stroke="purple"
    stroke-width="1"
  />
</svg>

18.8 text 绘制文本

属性	描述
x 和 y	定义文本的坐标
text-anchor	文本的对齐方式：star middle end

<svg width="300" height="30">
  <text x="0" y="15" fill="red">I Love SVG</text>
</svg>

文本倾斜
<svg width="300" height="200">
  <text x="0" y="15" fill="red" transform="rotate(30 20,40)"> I Love SVG </text>
</svg>

text 元素可以包括多个 tspan 元素。

每个 tspan 元素可以 包含不同的格式和位置。

<svg width="300" height="200">
  <text x="10" y="20" fill="red">
    I Love SVG
    <tspan x="10" y="45">1111</tspan>
    <tspan x="10" y="70">2222</tspan>
  </text>
</svg>

也可以给文本添加链接，使用 a 标签包括起来。

<svg width="200" height="30" xmlns:xlink="https://www.w3.org/1999/xlink">
  <a xlink:href="svg_line_polygon_polyline.html" target="_black">
    <text x="10" y="15" fill="red">SVG!!!</text>
  </a>
</svg>

18.9 path 绘制路径

可以绘制任意形状的图形。

属性	描述
d	定义绘制路径的命令
M	定义绘制图形的起点坐标
L	用来绘制一条直线
	大写字母表示绝对定位，相对于屏幕坐标圆点的位置
	小写字母表示相对定位，相对于上一个绘制点的位置
q	用来绘制二次贝塞尔曲线。需要定义控制点和终点坐标。

贝塞尔曲线 
<svg width="450" height="400">
  <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
</svg>

<svg width="450" height="400">
  <path d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
  <path d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />
  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
  <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
  <g fill="black">
    <circle cx="100" cy="350" r="3" />
    <circle cx="250" cy="50" r="3" />
    <circle cx="400" cy="350" r="3" />
  </g>
  <g font-size="30" fill="black" text-anchor="middle">
    <text x="100" y="350" dx="-30">A</text>
    <text x="250" y="50" dx="-10">B</text>
    <text x="400" y="350" dx="30">C</text>
  </g>
</svg>

18.10 SVG 描边属性

所有的描边属性，都可以应用于任何类型的 线条、文本和元素的轮廓。

属性	描述
stroke	笔画属性。定义了一个元素的线条、文本或轮廓的颜色。值是任何合法的颜色值
stroke-width	笔画宽度属性。定义了一个元素的厚度。值是一个数字
stroke-linecap	笔画笔帽属性。定义了一个开放路径的不同类型的结束点。值有三个：
	butt 没有线帽
	round 圆形线帽
	square 方形线帽
stroke-dasharray	虚线笔画属性。创建虚线，值是虚线序列，以此定义虚线的线条与空隙的大小。至少要定义 两个值 。

<svg width="300" height="80">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="black" d="M5 40 l215 0" />
    <path stroke="blue" d="M5 60 l215 0" />
  </g>
</svg>
<br />
厚度
<svg width="300" height="80">
  <g fill="none" stroke="black">
    <path stroke-width="2" d="M5 20 l215 0" />
    <path stroke-width="4" d="M5 40 l215 0" />
    <path stroke-width="6" d="M5 60 l215 0" />
  </g>
</svg>
<br />
线帽
<svg width="300" height="80">
  <g fill="none" stroke="black" stroke-width="6">
    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
</svg>
<br />
虚线
<svg width="300" height="80">
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 
  </g>
</svg>

18.11 SVG 模糊和阴影效果

18.11.1 模糊效果 filter

属性	描述
filter	元素里面包括一个或多个效果滤镜。
filter	元素有一个必要的 id 属性，用于识别过滤器，图形通过这个 id 识别要使用的过滤器。
filter	元素都是在 defs 中定义的。

<defs>
	<filter id ></filter>
</defs>

模糊效果可以通过 feGaussianBulr 滤镜来创建，是一个高斯模糊效果。定义在 filter 标签里面。

stdDeviation 属性定义模糊的数量，值是一个数字，值越大模糊的程度就越高。

<svg width="110" height="110">
  <defs>
    <filter x="0" y="0" id="f1">
      <feGaussianBlur stdDeviation="15" />
    </filter>
  </defs>
  <rect
    width="90"
    height="90"
    stroke="green"
    stroke-width="3"
    fill="yellow"
    filter="url(#f1)"
  />
</svg>

18.11.2 阴影效果

阴影效果可以通过 feOffset 滤镜和 feBlend 滤镜来实现。

其原理 是将 SVG 图形图像火元素，在xy平面上做一定的偏移。

定义在 filter 标签里面。

feOffset 属性：

属性	描述
dx	表示阴影在 x 轴上的偏移量。
dy	表示阴影在 y 轴上的偏移量。
in	表示阴影图像的来源。值为：
	SourceAlpha 时表示是一个黑色的阴影。
	SourceGraphic 表示阴影图像的来源。

最后还需要在偏移图像上混合元素的图像，应用 feBlend 标签。

<svg width="140" height="140">
  <defs>
    <filter x="0" y="0" width="200" height="200" id="f2">
      <feOffset in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur stdDeviation="10" />
      <feBlend in="SourceGraphic" />
    </filter>
  </defs>
  <rect
    width="90"
    height="90"
    stroke="green"
    stroke-width="3"
    fill="yellow"
    filter="url(#f2)"
  />
</svg>

18.12 SVG 线性渐变和径向渐变

渐变是一种颜色向另一种颜色的平滑过渡。几种颜色的过渡可以应用于同一个元素。

SVG 中主要有两种渐变类型：线性渐变 和 径向渐变。

18.12.1 线性渐变

linearGradient 来定义。必须嵌套在 defs 标签中。可以实现 水平渐变、垂直渐变、角度渐变。

属性	描述
x1 和 y1	用于定义线性渐变的开始位置
x2 和 y2	用于定义线性渐变的结束位置
当 y1 = y1，x1 ≠ x2	会产生水平渐变
当 x1 = x2，y1 ≠ y1	会产生垂直渐变
当 x1 ≠ x2，y1 ≠ y1	会产生角度渐变

线性渐变的颜色范围可以有两种或多种颜色组成。

每种颜色都用一个 stop 标签来定义：

属性	描述
offset	用于定义渐变颜色的开始位置和结束位置，是 一个表示相对位置的百分比。
stop-color	用于定义渐变的颜色。

<defs>
	<linearGradient>
    	<stop offset="10%" />
    </linearGradient>
</defs>

<!-- 水平渐变 -->
<svg width="400" height="150">
  <defs>
    <linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="grad1">
      <stop offset="0%" stop-color="rgb(255,255,0)" />
      <stop offset="100%" stop-color="rgb(255,0,0)" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <!-- 添加文本 -->
  <text fill="#fff" font-size="45" x="150" y="86">SVG</text>
</svg>

18.12.2 径向渐变

radialGradient 来定义，也必须嵌套在 defs 标签中。

属性	描述
id	定义渐变的唯一名称
cx cy r	定义了最外面的圆
fx fy	定义了最里面的圆

径向渐变的颜色范围可以有两种或多种颜色组成。

每种颜色都用一个 stop 标签来定义：

属性	描述
offset	用于定义渐变颜色的开始位置和结束位置，是 一个表示相对位置的百分比。
stop-color	用于定义渐变的颜色。

<svg width="500" height="150">
  <defs>
    <radialGradient cx="50%" cy="50" r="50%" fx="50%" fy="50%" id="grad2">
      <stop offset="0%" stop-color="rgb(255,255,255)" />
      <stop offset="100%" stop-color="rgb(0,0,255)" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>