SVG样式
SVG默认样式
SVG 最早的定位是：
- 可以嵌在一段文本中
- 和文字一起排版
- 类似数学公式、图标、装饰符号
css
display: inline;
vertical-align: baseline;和 span 一样是 行内元素：
- 和文字在同一行
- 底部有一小段空隙（baseline 对齐）
width / height 是生效的（这点和普通 inline 不同）
css
svg {
width: 100px;
height: 100px;
}原因：SVG 是“可替换元素（replaced element）”
iconfont svg
在iconfont中下载的svg格式存在额外的信息：
- t：非SVG标准，iconfont时间戳
- p-id：非SVG标准，iconfont唯一标识
css
<svg t="1768966171952" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7637" width="200" height="200"><path d="M372.3264 228.010667a27.306667 27.306667 0 0 1-26.350933-34.679467 89.2928 89.2928 0 0 1 24.302933-40.96 100.078933 100.078933 0 0 1 73.864533-24.849067 27.306667 27.306667 0 1 1-1.6384 54.613334 46.6944 46.6944 0 0 0-34.679466 9.966933 34.952533 34.952533 0 0 0-9.284267 16.520533 27.306667 27.306667 0 0 1-26.2144 19.387734zM791.893333 671.197867a27.306667 27.306667 0 0 1-6.007466-54.613334 34.952533 34.952533 0 0 0 16.930133-8.465066c30.993067-29.4912 1.2288-136.533333-92.706133-247.944534a27.306667 27.306667 0 1 1 41.7792-35.089066C864.392533 459.025067 901.12 591.735467 840.9088 648.533333a89.156267 89.156267 0 0 1-42.461867 22.1184 27.306667 27.306667 0 0 1-6.5536 0.546134z" fill="#0073FF" p-id="7638"></path><path d="M771.959467 673.245867c-77.0048 0-185.9584-62.2592-281.8048-163.84C382.293333 395.946667 324.676267 269.243733 346.112 193.3312a27.306667 27.306667 0 0 1 52.565333 14.7456c-13.653333 46.967467 28.2624 155.511467 131.072 264.055467S738.9184 628.053333 786.432 617.2672a27.306667 27.306667 0 0 1 12.014933 53.248 120.695467 120.695467 0 0 1-26.487466 2.730667z" fill="#0073FF" p-id="7639"></path><path d="M88.610133 917.640533a27.306667 27.306667 0 0 1-25.258666-37.6832l283.716266-689.629866a27.306667 27.306667 0 1 1 50.517334 20.753066L136.533333 844.458667l646.894934-226.372267A27.306667 27.306667 0 1 1 801.450667 669.013333L97.621333 916.138667a27.306667 27.306667 0 0 1-9.0112 1.501866z" fill="#0073FF" p-id="7640"></path><path d="M532.48 762.402133a27.306667 27.306667 0 0 1-17.066667-6.007466 1424.725333 1424.725333 0 0 1-144.861866-132.983467A1423.36 1423.36 0 0 1 245.76 471.722667a27.306667 27.306667 0 0 1 44.509867-31.675734A1369.2928 1369.2928 0 0 0 409.6 585.864533a1369.7024 1369.7024 0 0 0 139.264 127.7952 27.306667 27.306667 0 0 1-16.384 48.7424zM325.768533 834.628267a27.306667 27.306667 0 0 1-18.432-7.099734c-25.941333-23.620267-51.2-48.3328-74.9568-73.454933s-47.104-51.6096-69.358933-78.779733A27.306667 27.306667 0 1 1 204.8 640.750933c21.435733 26.2144 43.8272 51.6096 66.628267 75.776s47.104 47.9232 72.0896 70.587734a27.306667 27.306667 0 0 1-18.432 47.5136z" fill="#0073FF" p-id="7641"></path><path d="M680.139633 471.275431m-32.500528 30.809524a44.782933 44.782933 0 1 0 65.001056-61.619048 44.782933 44.782933 0 1 0-65.001056 61.619048Z" fill="#0073FF" p-id="7642"></path><path d="M591.735467 324.949333h-3.003734a109.226667 109.226667 0 1 1 3.003734 0z m0-163.84a54.613333 54.613333 0 1 0 39.594666 16.384 54.613333 54.613333 0 0 0-39.7312-16.520533zM850.466133 311.7056a27.306667 27.306667 0 0 1-18.978133-46.830933l84.7872-81.92a27.306667 27.306667 0 0 1 38.0928 39.185066l-84.7872 81.92a27.306667 27.306667 0 0 1-19.114667 7.645867z" fill="#0073FF" p-id="7643"></path><path d="M934.161067 312.9344a27.306667 27.306667 0 0 1-19.387734-8.328533l-81.92-84.7872a27.306667 27.306667 0 1 1 39.185067-38.0928l81.92 84.7872a27.306667 27.306667 0 0 1-19.524267 46.2848z" fill="#0073FF" p-id="7644"></path></svg>CSS
| 属性 | 描述 | 类似 CSS |
|---|---|---|
fill | 填充颜色 | background-color |
stroke | 描边颜色 | border-color |
stroke-width | 描边宽度 | border-width |
css
svg {
width: 100px;
height: 100px;
}
svg path {
fill: green;
stroke: black;
stroke-width: 5px;
fill: none;
}Examples
描边特效
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
svg {
width: 400px;
height: 400px;
}
svg path {
fill: none;
stroke: green;
stroke-width: 10px;
}
svg:hover path {
animation: move 1s;
}
@keyframes move {
0% {
stroke-dasharray: 0 500;
}
100% {
stroke-dasharray: 500 0;
}
}
</style>
</head>
<body>
<svg t="1768974109523" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="7807" width="200" height="200">
<path
d="M554.666667 712.533333V106.666667h-85.333334v601.6l-132.266666-132.266667L277.333333 640l234.666667 234.666667 234.666667-234.666667-59.733334-59.733333-132.266666 132.266666z"
fill="#444444" p-id="7808"></path>
</svg>
</body>
</html>简单画笔动画
对于简单的svg（只有一个子元素）可以添加路径绘制动画（一笔画）。
css
const path = document.querySelector('path')
const length = path.getTotalLength()
path.style.strokeDasharray = length
path.style.strokeDashoffset = lengthhtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
@keyframes move {
0% {
stroke-dashoffset: 2502;
}
100% {
stroke-dashoffset: 0;
}
}
svg {
width: 400px;
height: 400px;
stroke: green;
stroke-width: 10px;
stroke-dasharray: 2502;
stroke-dashoffset: 2502;
animation: move 3s linear infinite;
}
svg path {
fill: none;
}
</style>
</head>
<body>
<svg t="1768974109523" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="7807" width="200" height="200">
<path id="arrow"
d="M554.666667 712.533333V106.666667h-85.333334v601.6l-132.266666-132.266667L277.333333 640l234.666667 234.666667 234.666667-234.666667-59.733334-59.733333-132.266666 132.266666z"
fill="#444444" p-id="7808"></path>
</svg>
</body>
</html>