国际访客建议访问 Primers 编程伙伴 国际版站点 > HTML 教程 > svg 以获得更好的体验。

# 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>

# 推荐阅读

本文 更新于: 2025-11-27 09:38:05 创建于: 2025-11-27 09:38:05