HTML SVG 内联与交互
HTML内联SVG：直接在HTML中嵌入<svg>标签、CSS样式控制SVG、JavaScript操作SVG DOM、SVG动画(SMIL animate/animateTransform/animateMotion)、与<img>/<object>引入SVG对比 · 难度：入门 · +10XP
HTML 内联 SVG —— 在HTML中直接画图
SVG是矢量图形——放大多少倍都不会模糊。把SVG直接写在HTML里，还可以用CSS和JavaScript操控它。
在HTML中嵌入SVG
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="80" fill="blue" stroke="black" stroke-width="3"/>
<text x="100" y="105" text-anchor="middle" fill="white" font-size="20">SVG</text>
</svg>用CSS控制SVG样式
svg circle:hover {
fill: red;
transform: scale(1.2);
transition: all 0.3s;
}常见SVG形状
| 形状 | 标签 | 关键属性 |
|---|---|---|
| 圆形 | circle | cx, cy, r |
| 矩形 | rect | x, y, width, height, rx, ry |
| 路径 | path | d (贝塞尔曲线) |
动手练习
- 基础练习：用SVG画一个简易笑脸——黄色圆形+眼睛+嘴巴。
- 进阶应用：用SVG path画五角星，CSS animation让它旋转。
- 项目实战：用内联SVG做一组社交媒体图标，鼠标悬停时放大变色。