SVG 多边形

<polygon> 元素用于绘制至少三条边的封闭多边形，如三角形、五边形、星形等。

基本语法

<svg width="200" height="200">
  <polygon points="100,10 190,190 10,190" fill="#3b82f6"/>
</svg>

主要属性

属性	描述
points	定义多边形各顶点坐标，格式：x1,y1 x2,y2 x3,y3...
fill	填充颜色
stroke	描边颜色
stroke-width	描边宽度
fill-rule	填充规则（nonzero 或 evenodd）

points 格式

坐标点可以用空格或逗号分隔：

• 100,10 190,190 10,190
• 100 10, 190 190, 10 190
• 100 10 190 190 10 190

三角形

<svg width="400" height="150">
  <!-- 等边三角形 -->
  <polygon points="70,20 130,120 10,120" fill="#3b82f6"/>
  
  <!-- 等腰三角形 -->
  <polygon points="210,20 260,120 160,120" fill="#22c55e"/>
  
  <!-- 直角三角形 -->
  <polygon points="310,120 310,20 390,120" fill="#ef4444"/>
</svg>

矩形和正方形

<svg width="300" height="150">
  <!-- 正方形 -->
  <polygon points="20,20 100,20 100,100 20,100" fill="#3b82f6"/>
  
  <!-- 矩形 -->
  <polygon points="130,30 280,30 280,90 130,90" fill="#22c55e"/>
</svg>

五边形和六边形

<svg width="400" height="200">
  <!-- 五边形 -->
  <polygon points="100,10 161,59 138,127 62,127 39,59" fill="#3b82f6"/>
  
  <!-- 六边形 -->
  <polygon points="300,30 350,55 350,105 300,130 250,105 250,55" fill="#8b5cf6"/>
</svg>

星形

<svg width="400" height="200">
  <!-- 五角星 -->
  <polygon points="100,10 120,80 190,80 135,120 155,190 100,150 45,190 65,120 10,80 80,80" 
           fill="#f59e0b"/>
  
  <!-- 四角星 -->
  <polygon points="300,20 320,80 380,100 320,120 300,180 280,120 220,100 280,80" 
           fill="#ef4444"/>
</svg>

带描边的多边形

<svg width="400" height="150">
  <!-- 只有描边 -->
  <polygon points="70,20 130,120 10,120" 
           fill="none" stroke="#3b82f6" stroke-width="3"/>
  
  <!-- 填充 + 描边 -->
  <polygon points="220,20 280,120 160,120" 
           fill="#bfdbfe" stroke="#3b82f6" stroke-width="4"/>
  
  <!-- 虚线描边 -->
  <polygon points="370,20 430,120 310,120" 
           fill="none" stroke="#ef4444" stroke-width="3"
           stroke-dasharray="10,5"/>
</svg>

填充规则 (fill-rule)

<svg width="400" height="200">
  <!-- nonzero（默认） -->
  <polygon points="100,10 120,80 190,80 135,120 155,190 100,150 45,190 65,120 10,80 80,80"
           fill="#3b82f6" fill-rule="nonzero"/>
  <text x="100" y="210" text-anchor="middle" font-size="12">nonzero</text>
  
  <!-- evenodd -->
  <polygon points="300,10 320,80 390,80 335,120 355,190 300,150 245,190 265,120 210,80 280,80"
           fill="#3b82f6" fill-rule="evenodd"/>
  <text x="300" y="210" text-anchor="middle" font-size="12">evenodd</text>
</svg>

透明多边形

<svg width="250" height="200">
  <polygon points="70,20 130,120 10,120" fill="#3b82f6" opacity="0.6"/>
  <polygon points="110,20 170,120 50,120" fill="#ef4444" opacity="0.6"/>
  <polygon points="90,60 150,160 30,160" fill="#22c55e" opacity="0.6"/>
</svg>

使用 CSS 样式

<style>
  .polygon-hover {
    fill: #3b82f6;
    stroke: #1d4ed8;
    stroke-width: 2;
    transition: all 0.3s ease;
    cursor: pointer;
  }
  .polygon-hover:hover {
    fill: #60a5fa;
    transform: scale(1.1);
    transform-origin: center;
  }
</style>

<svg width="150" height="150">
  <polygon class="polygon-hover" points="75,10 140,130 10,130"/>
</svg>

多边形动画

<svg width="400" height="150">
  <!-- 颜色动画 -->
  <polygon points="70,20 130,120 10,120" fill="#3b82f6">
    <animate attributeName="fill" 
             values="#3b82f6;#ef4444;#22c55e;#3b82f6" 
             dur="3s" repeatCount="indefinite"/>
  </polygon>
  
  <!-- 旋转动画 -->
  <polygon points="220,20 280,120 160,120" fill="#8b5cf6">
    <animateTransform attributeName="transform" type="rotate"
                      values="0 220 70;360 220 70" dur="3s" repeatCount="indefinite"/>
  </polygon>
  
  <!-- 缩放动画 -->
  <polygon points="370,20 430,120 310,120" fill="#f59e0b">
    <animateTransform attributeName="transform" type="scale"
                      values="1;1.2;1" dur="1.5s" repeatCount="indefinite"/>
  </polygon>
</svg>

实际应用示例

播放按钮

<svg width="80" height="80">
  <circle cx="40" cy="40" r="38" fill="#3b82f6"/>
  <polygon points="32,25 60,40 32,55" fill="white"/>
</svg>

箭头

<svg width="300" height="100">
  <!-- 右箭头 -->
  <polygon points="10,35 60,35 60,20 100,50 60,80 60,65 10,65" fill="#3b82f6"/>
  
  <!-- 上箭头 -->
  <polygon points="180,100 180,50 165,50 200,10 235,50 220,50 220,100" fill="#22c55e"/>
  
  <!-- 双向箭头 -->
  <polygon points="260,50 290,25 290,40 360,40 360,25 390,50 360,75 360,60 290,60 290,75" 
           fill="#ef4444"/>
</svg>

徽章/盾牌

<svg width="100" height="120">
  <polygon points="50,5 95,25 95,70 50,115 5,70 5,25" 
           fill="#3b82f6" stroke="#1d4ed8" stroke-width="3"/>
  <text x="50" y="65" text-anchor="middle" fill="white" font-size="24" font-weight="bold">
    ★
  </text>
</svg>

钻石

<svg width="100" height="120">
  <!-- 顶部 -->
  <polygon points="50,5 85,35 50,50 15,35" fill="#60a5fa"/>
  <!-- 底部 -->
  <polygon points="50,50 85,35 50,115 15,35" fill="#3b82f6"/>
</svg>

山形图标

<svg width="150" height="100">
  <!-- 背景 -->
  <rect width="150" height="100" rx="8" fill="#0ea5e9"/>
  <!-- 大山 -->
  <polygon points="30,90 75,30 120,90" fill="#22c55e"/>
  <!-- 小山 -->
  <polygon points="80,90 110,50 140,90" fill="#16a34a"/>
  <!-- 太阳 -->
  <circle cx="120" cy="25" r="12" fill="#fbbf24"/>
</svg>

六边形网格单元

<svg width="200" height="180">
  <polygon points="60,10 100,30 100,70 60,90 20,70 20,30" 
           fill="#3b82f6" stroke="white" stroke-width="2"/>
  <polygon points="120,10 160,30 160,70 120,90 80,70 80,30" 
           fill="#60a5fa" stroke="white" stroke-width="2"/>
  <polygon points="90,70 130,90 130,130 90,150 50,130 50,90" 
           fill="#93c5fd" stroke="white" stroke-width="2"/>
</svg>

下一步

学会了多边形，接下来让我们学习 SVG 折线！