#HTML 的 <svg> 标签
请查看 HTML 元素帮助手册 了解更多 HTML 元素。
如果 svg 不是根元素，svg 元素可以用于在当前文档（比如说，一个 HTML 文档）内嵌套一个独立的 svg 片段。这个独立片段拥有独立的视口和坐标系统。
#属性
请查看 HTML 元素的全局属性 了解 HTML 元素的全局属性。
#示例
<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- 定义颜色（渐变） -->
<defs>
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#66ccff" />
<stop offset="100%" stop-color="#39c5bb" />
</linearGradient>
<linearGradient id="petalGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ff9a9e" />
<stop offset="100%" stop-color="#fad0c4" />
</linearGradient>
</defs>
<!-- 背景 -->
<rect width="100%" height="100%" fill="url(#bgGradient)" />
<!-- 花瓣 -->
<g transform="translate(150, 150)">
<!-- 6片花瓣 -->
<g>
<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"
fill="url(#petalGradient)"
stroke="#fff"
stroke-width="1.5"
opacity="0.9" />
<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"
fill="url(#petalGradient)"
stroke="#fff"
stroke-width="1"
transform="rotate(60)" />
<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"
fill="url(#petalGradient)"
stroke="#fff"
stroke-width="1"
transform="rotate(120)" />
<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"
fill="url(#petalGradient)"
stroke="#fff"
stroke-width="1"
transform="rotate(180)" />
<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"
fill="url(#petalGradient)"
stroke="#fff"
stroke-width="1"
transform="rotate(240)" />
<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"
fill="url(#petalGradient)"
stroke="#fff"
stroke-width="1"
transform="rotate(300)" />
</g>
<!-- 花蕊 -->
<circle cx="0" cy="0" r="20" fill="#fff" opacity="0.8" />
<circle cx="0" cy="0" r="15" fill="#fad0c4" opacity="0.9" />
</g>
<!-- 装饰小点 -->
<circle cx="50" cy="50" r="3" fill="#fff" opacity="0.7" />
<circle cx="250" cy="80" r="4" fill="#fff" opacity="0.7" />
<circle cx="80" cy="250" r="5" fill="#fff" opacity="0.7" />
<circle cx="200" cy="200" r="2" fill="#fff" opacity="0.7" />
</svg>
<svg>
