SVG简介

矢量图形的表示方式之一：SVG(Scalable Vector Graphics)

SVG嵌入HTML的方法曾经现在 1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <title>SVG Example</title> 5 <meta charset="UTF-8"> 6</head> 7<body> 8 <svg width="200" height="200"> 9 <circle cx="100" cy="100" r="50" fill="green" /> 10 </svg> 11</body> 12</html>

比较

CSS样式支持
根标签：background相关、border相关、position、left、top、margin、padding、width、height
所有标签：font相关、display、visibility、transform
特有样式：fill相关、stroke相关(也可以用属性设置)

常用标签

title、desc	不显示，用于描述SVG内容
circle、rect、line、text、path、polyline	绘图相关
g	分组，g的样式会应用给所有子元素
use	复制href中指定的元素，可进行坐标转换和样式调整。手机浏览器目前不支持
defs	定义元素，不显示，与use一起使用

示例

1<svg width="140" height="170" > 2 <title>Cat</title> 3 <desc>Stick Figure of a Cat</desc> 4 <circle cx="70" cy="95" r="50" style="stroke: black; fill: none;" /> 5 <circle cx="55" cy="80" r="5" stroke="black" fill="#339933" /> 6 <circle cx="85" cy="80" r="5" stroke="black" fill="#339933" /> 7 <g id="whiskers"> 8 <line x1="75" y1="95" x2="135" y2="85" style="stroke: black;" /> 9 <line x1="75" y1="95" x2="135" y2="105" style="stroke: black;" /> 10 </g> 11 <use href="#whiskers" transform="scale(-1 1) translate(-140 0)" /> 12 <polyline points="108 62, 90 10, 70 45, 50, 10, 32, 62" style="stroke: black; fill: none;" /> 13 <path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90" style="stroke: black; fill: #ffcccc" /> 14 <polyline points="35 110, 45 120, 95 120, 105, 110" style="stroke: black; fill: none;" /> 15 <text x="60" y="165" style="font-family: sans-serif; font-size: 14px; stroke: none; fill: black;">Cat</text> 16</svg>

左上角为原点，向右x值变大，向下y值变大

viewBox="startX startY width height"
preserveAspectRatio="alignment [meet|slice]" or "none"

translate scale rotate