review html5 01：svg
2017-04-05 本文已影响15人
蝴蝶结199007
（1）知识点
- （1.1）什么是svg
- （1.2）svg的优势
- （1.3）svg格式（<svg></svg>）
（2）细化
（2.1）什么是svg
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG 是万维网联盟的标准
（2.2）svg的优势
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
- SVG 图像可通过文本编辑器来创建和修改
- SVG 图像可被搜索、索引、脚本化或压缩
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
（3）实践
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复习html5 svg</title>
</head>
<body>
<svg width="140" height="170">
<title>猫咪</title>
<desc>使用svg画了一个猫咪</desc>
<!--脸
cx：center x 中心点x轴距离，距离左边框
cy：center y 中心点y轴距离，距离上边框
r：半径
stroke：边框颜色
fill：填充的颜色
-->
<circle cx="70" cy="95" r="50" style="stroke: red; fill: none;" />
<circle cx="55" cy="80" r="5" style="stroke: black; fill: #339933" />
<circle cx="85" cy="80" r="5" style="stroke: black; fill: #339933" />
<g id="whiskers">
<link x1="75" y1="95" x2="135" y2="85" style="stroke: black;" />
<link x1="75" y1="95" x2="135" y2="105" style="stroke: black;" />
</g>
<use xlink:href="#whiskers" transform="scale(-1,1) translate(-140,0)" />
<!-- 耳朵 -->
<polyline points="108 62, 90 10,70 45, 50 10, 32 62" style="stroke: black; fill: none;" />
<!-- 嘴 -->
<polyline points="35 110, 45 120, 95 120, 105 110" style="stroke: black; fill: none;" />
<!-- 鼻子 -->
<path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90" style="stroke: black; fill: #ffcccc;" />
<text x="60" y="165" style="font-family:sans-serif; font-size:14pt;">Cat</text>
</svg>
</body>
</html>
