Refs#
快速入门先阅读： A Friendly Introduction to SVG
快速入门可以对比 HTML；full cheatsheet[1]
| SVG |
HTML |
| <tags /> |
<shapes /> |
| fill |
background |
| stroke |
border |
| opacity |
opacity |
SVG特有的地方：<symbole> <defs> <use>SVG Shapes#
<svg width="128" height="128" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="50" height="50" rx="20" ry="20" />
<circle cx="25" cy="75" r="20"/>
<ellipse cx="30" cy="30" rx="20" ry="25" />
<line x1="10" y1="10" x2="80" y2="30" />
<polyline points="10,10 20,10 30,30 10,50 10,30" />
<polygon points="10,10 20,10 30,30 10,50 10,30" />
</svg>SVG 动画#
以spin动画为例
<svg>
<style>
@keyframes grow {
from {
stroke-dasharray:
calc(var(--circumference) * 0.05),
var(--circumference);
}
to {
stroke-dasharray:
calc(var(--circumference) * 0.25),
var(--circumference);
}
}
@keyframes spin {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset:
calc(var(--circumference) * -0.95);
}
}
circle {
/*
Calculate the circumference in JS, and
apply it as a custom property:
*/
--circumference: 572px;
animation:
grow 1200ms infinite alternate paused,
spin 2400ms infinite alternate paused;
}
</style>
</svg>
Text#
<text x="0" y="0">
Dimetrodon is
<tspan dy="-30">not</tspan>
a dinosaur.
</text>
Group#
<g class="head">
<!-- svg shapes -->
</g>
<symbol id="symbol-id" viewBox="0 0 256 256">
<!-- svg shapes -->
</symbol>
<use xlink:href="#symbol-id" />
<defs>
<path id="arc" d="M100,160 Q128,190 156,160" />
</defs>
<defs>
<linearGradient id="the-gradient">
<stop offset="0%" stop-color="orange" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<circle fill="url(#the-gradient)" cx="100" cy="100" r="100" />
[^1]: https://learntheweb.courses/topics/svg-cheat-sheet/