#HTML 的 <svg> 标签
请查看 HTML 元素帮助手册 了解更多 HTML 元素。
如果 svg 不是根元素，svg 元素可以用于在当前文档（比如说，一个 HTML 文档）内嵌套一个独立的 svg 片段。这个独立片段拥有独立的视口和坐标系统。
#属性
请查看 HTML 元素的全局属性 了解 HTML 元素的全局属性。
#示例
<svg>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
#推荐阅读
《HTML 的 <svg> 标签》 是转载文章，点击查看原文。