#HTML 的 <svg> 标签

请查看 HTML 元素帮助手册了解更多 HTML 元素。

如果 svg 不是根元素，svg 元素可以用于在当前文档（比如说，一个 HTML 文档）内嵌套一个独立的 svg 片段。这个独立片段拥有独立的视口和坐标系统。

#属性

请查看 HTML 元素的全局属性了解 HTML 元素的全局属性。

#示例

1<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
2    <!-- 定义颜色（渐变） -->
3    <defs>
4        <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
5        <stop offset="0%" stop-color="#66ccff" />
6        <stop offset="100%" stop-color="#39c5bb" />
7        </linearGradient>
8        <linearGradient id="petalGradient" x1="0%" y1="0%" x2="100%" y2="100%">
9        <stop offset="0%" stop-color="#ff9a9e" />
10        <stop offset="100%" stop-color="#fad0c4" />
11        </linearGradient>
12    </defs>
13
14    <!-- 背景 -->
15    <rect width="100%" height="100%" fill="url(#bgGradient)" />
16
17    <!-- 花瓣 -->
18    <g transform="translate(150, 150)">
19        <!-- 6片花瓣 -->
20        <g>
21            <path d="M0 -70 Q20 -90 40 -70 Q60 -50 40 -30 Q20 -10 0 -30 Q-20 -10 -40 -30 Q-60 -50 -40 -70 Q-20 -90 0 -70" 
22                    fill="url(#petalGradient)" 
23                    stroke="#fff" 
24                    stroke-width="1.5" 
25                    opacity="0.9" />
26            <path d="M0 -70 Q20 -90 40 -70 Q60 -50 40 -30 Q20 -10 0 -30 Q-20 -10 -40 -30 Q-60 -50 -40 -70 Q-20 -90 0 -70" 
27                    fill="url(#petalGradient)" 
28                    stroke="#fff" 
29                    stroke-width="1" 
30                    transform="rotate(60)" />
31            <path d="M0 -70 Q20 -90 40 -70 Q60 -50 40 -30 Q20 -10 0 -30 Q-20 -10 -40 -30 Q-60 -50 -40 -70 Q-20 -90 0 -70" 
32                    fill="url(#petalGradient)" 
33                    stroke="#fff" 
34                    stroke-width="1" 
35                    transform="rotate(120)" />
36            <path d="M0 -70 Q20 -90 40 -70 Q60 -50 40 -30 Q20 -10 0 -30 Q-20 -10 -40 -30 Q-60 -50 -40 -70 Q-20 -90 0 -70" 
37                    fill="url(#petalGradient)" 
38                    stroke="#fff" 
39                    stroke-width="1" 
40                    transform="rotate(180)" />
41            <path d="M0 -70 Q20 -90 40 -70 Q60 -50 40 -30 Q20 -10 0 -30 Q-20 -10 -40 -30 Q-60 -50 -40 -70 Q-20 -90 0 -70" 
42                    fill="url(#petalGradient)" 
43                    stroke="#fff" 
44                    stroke-width="1" 
45                    transform="rotate(240)" />
46            <path d="M0 -70 Q20 -90 40 -70 Q60 -50 40 -30 Q20 -10 0 -30 Q-20 -10 -40 -30 Q-60 -50 -40 -70 Q-20 -90 0 -70" 
47                    fill="url(#petalGradient)" 
48                    stroke="#fff" 
49                    stroke-width="1" 
50                    transform="rotate(300)" />
51        </g>
52
53        <!-- 花蕊 -->
54        <circle cx="0" cy="0" r="20" fill="#fff" opacity="0.8" />
55        <circle cx="0" cy="0" r="15" fill="#fad0c4" opacity="0.9" />
56    </g>
57
58    <!-- 装饰小点 -->
59    <circle cx="50" cy="50" r="3" fill="#fff" opacity="0.7" />
60    <circle cx="250" cy="80" r="4" fill="#fff" opacity="0.7" />
61    <circle cx="80" cy="250" r="5" fill="#fff" opacity="0.7" />
62    <circle cx="200" cy="200" r="2" fill="#fff" opacity="0.7" />
63</svg>
64

<svg>

#推荐阅读

HTML 的 svg 元素 - MDN

《HTML 的 <svg> 标签》是转载文章，点击查看原文。