圈圈之地

代码： 全选

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 780 320" width="720" height="320">
  <style>
    .bg { fill: #f8fafc; }
    .title { font-family: system-ui, sans-serif; font-size: 16px; font-weight: bold; fill: #1e293b; text-anchor: middle; }
    .subtitle { font-family: system-ui, sans-serif; font-size: 13px; fill: #64748b; text-anchor: middle; }
    .poly1 { fill: rgba(37, 99, 235, 0.12); stroke: #2563eb; stroke-width: 2.5; stroke-linejoin: round; }
    .poly2 { fill: rgba(5, 150, 105, 0.12); stroke: #059669; stroke-width: 2.5; stroke-linejoin: round; }
    .label { font-family: system-ui, sans-serif; font-size: 14px; font-weight: bold; }
    .lbl1 { fill: #1d4ed8; }
    .lbl2 { fill: #047857; }
    .vertex { fill: #ffffff; stroke-width: 2; }
    .v1 { stroke: #2563eb; }
    .v2 { stroke: #059669; }
  </style>

  <rect width="100%" height="100%" class="bg" rx="12"/>

  <!-- 圖形一 -->
  <g>
    <text x="200" y="32" class="title">排列一：(5, 4, 2, 3, 1)</text>
    <text x="200" y="52" class="subtitle">內角：60°, 120°, 120°, 120°, 120°</text>
    
    <polygon points="85,230 335,230 235,56.8 135,56.8 60,186.7" class="poly1" />
    
    <!-- 邊長標籤 -->
    <text x="210" y="250" class="label lbl1" text-anchor="middle">5</text>
    <text x="295" y="140" class="label lbl1" text-anchor="start">4</text>
    <text x="185" y="48" class="label lbl1" text-anchor="middle">2</text>
    <text x="88" y="115" class="label lbl1" text-anchor="end">3</text>
    <text x="62" y="215" class="label lbl1" text-anchor="end">1</text>
    
    <!-- 頂點 -->
    <circle cx="85" cy="230" r="4" class="vertex v1"/>
    <circle cx="335" cy="230" r="4" class="vertex v1"/>
    <circle cx="235" cy="56.8" r="4" class="vertex v1"/>
    <circle cx="135" cy="56.8" r="4" class="vertex v1"/>
    <circle cx="60" cy="186.7" r="4" class="vertex v1"/>
  </g>

  <!-- 圖形二 -->
  <g>
    <text x="575" y="32" class="title">排列二：(3, 5, 2, 1, 4)</text>
    <text x="575" y="52" class="subtitle">內角：60°, 120°, 120°, 120°, 120°</text>
    
    <polygon points="550,270 700,270 575,53.5 475,53.5 450,96.8" class="poly2" />
    
    <!-- 邊長標籤 -->
    <text x="625" y="290" class="label lbl2" text-anchor="middle">3</text>
    <text x="650" y="160" class="label lbl2" text-anchor="start">5</text>
    <text x="525" y="45" class="label lbl2" text-anchor="middle">2</text>
    <text x="453" y="70" class="label lbl2" text-anchor="end">1</text>
    <text x="490" y="190" class="label lbl2" text-anchor="end">4</text>
    
    <!-- 頂點 -->
    <circle cx="550" cy="270" r="4" class="vertex v2"/>
    <circle cx="700" cy="270" r="4" class="vertex v2"/>
    <circle cx="575" cy="53.5" r="4" class="vertex v2"/>
    <circle cx="475" cy="53.5" r="4" class="vertex v2"/>
    <circle cx="450" cy="96.8" r="4" class="vertex v2"/>
  </g>
</svg>

代码： 全选

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 720" width="1200" height="720">
<rect width="100%" height="100%" fill="#f8fafc"/>
<style>
.title {font-family:system-ui,sans-serif;font-size:18px;font-weight:700;fill:#1e293b;text-anchor:middle}
.info {font-family:system-ui,sans-serif;font-size:13px;fill:#475569;text-anchor:middle}
.side {font-family:system-ui,sans-serif;font-size:15px;font-weight:700;fill:#1d4ed8;text-anchor:middle}
.angle {font-family:system-ui,sans-serif;font-size:12px;fill:#b91c1c;text-anchor:middle}
.poly {fill:#dbeafe;fill-opacity:.55;stroke:#2563eb;stroke-width:2.2;stroke-linejoin:round}
.vertex {fill:#fff;stroke:#2563eb;stroke-width:1.8}
</style>
<text x="600.0" y="28" class="title">邊長為 1,2,3,4,5、內角皆為 30° 整數倍的凸／凹五邊形</text>
<text x="600.0" y="50" class="info">按旋轉、翻轉視為同一種，共 8 種（此前說 12 種是錯誤的）</text>

<g id="p1">
<text x="150" y="90" class="title">第 1 種</text>
<text x="150" y="111" class="info">邊：1-2-4-3-5</text>
<text x="150" y="129" class="info">角：60°,240°,60°,120°,60°</text>
<polygon points="87.31626,245.71429 118.65813,245.71429 150.00000,300.00000 212.68374,191.42857 165.67094,110.00000" class="poly"/>
<text x="102.99" y="230.71" class="side">1</text>
<text x="147.32" y="265.36" class="side">2</text>
<text x="168.35" y="238.21" class="side">4</text>
<text x="176.19" y="158.21" class="side">3</text>
<text x="139.48" y="185.36" class="side">5</text>
<circle cx="87.32" cy="245.71" r="3.3" class="vertex"/>
<text x="110.06" y="235.35" class="angle">60°</text>
<circle cx="118.66" cy="245.71" r="3.3" class="vertex"/>
<text x="136.67" y="228.38" class="angle">240°</text>
<circle cx="150.00" cy="300.00" r="3.3" class="vertex"/>
<text x="149.04" y="275.02" class="angle">60°</text>
<circle cx="212.68" cy="191.43" r="3.3" class="vertex"/>
<text x="189.57" y="200.96" class="angle">120°</text>
<circle cx="165.67" cy="110.00" r="3.3" class="vertex"/>
<text x="161.40" y="134.63" class="angle">60°</text>
</g>
<g id="p2">
<text x="450" y="90" class="title">第 2 種</text>
<text x="450" y="111" class="info">邊：1-2-4-5-3</text>
<text x="450" y="129" class="info">角：60°,300°,60°,60°,60°</text>
<polygon points="362.24276,224.00000 406.12138,224.00000 362.24276,300.00000 537.75724,300.00000 428.06069,110.00000" class="poly"/>
<text x="384.18" y="209.00" class="side">1</text>
<text x="397.17" y="269.50" class="side">2</text>
<text x="450.00" y="285.00" class="side">4</text>
<text x="469.92" y="212.50" class="side">5</text>
<text x="408.14" y="174.50" class="side">3</text>
<circle cx="362.24" cy="224.00" r="3.3" class="vertex"/>
<text x="387.02" y="227.30" class="angle">60°</text>
<circle cx="406.12" cy="224.00" r="3.3" class="vertex"/>
<text x="427.77" y="236.50" class="angle">300°</text>
<circle cx="362.24" cy="300.00" r="3.3" class="vertex"/>
<text x="378.25" y="280.80" class="angle">60°</text>
<circle cx="537.76" cy="300.00" r="3.3" class="vertex"/>
<text x="516.11" y="287.50" class="angle">60°</text>
<circle cx="428.06" cy="110.00" r="3.3" class="vertex"/>
<text x="426.26" y="134.94" class="angle">60°</text>
</g>
<g id="p3">
<text x="750" y="90" class="title">第 3 種</text>
<text x="750" y="111" class="info">邊：1-3-5-4-2</text>
<text x="750" y="129" class="info">角：60°,240°,60°,60°,120°</text>
<polygon points="655.00000,188.54552 693.00000,188.54552 750.00000,287.27241 845.00000,122.72759 693.00000,122.72759" class="poly"/>
<text x="674.00" y="173.55" class="side">1</text>
<text x="734.49" y="230.41" class="side">3</text>
<text x="784.51" y="197.50" class="side">5</text>
<text x="769.00" y="137.73" class="side">4</text>
<text x="686.99" y="163.14" class="side">2</text>
<circle cx="655.00" cy="188.55" r="3.3" class="vertex"/>
<text x="679.90" y="186.28" class="angle">60°</text>
<circle cx="693.00" cy="188.55" r="3.3" class="vertex"/>
<text x="717.55" y="183.82" class="angle">240°</text>
<circle cx="750.00" cy="287.27" r="3.3" class="vertex"/>
<text x="744.71" y="262.84" class="angle">60°</text>
<circle cx="845.00" cy="122.73" r="3.3" class="vertex"/>
<text x="822.66" y="133.96" class="angle">60°</text>
<circle cx="693.00" cy="122.73" r="3.3" class="vertex"/>
<text x="705.50" y="144.38" class="angle">120°</text>
</g>
<g id="p4">
<text x="1050" y="90" class="title">第 4 種</text>
<text x="1050" y="111" class="info">邊：1-3-4-5-2</text>
<text x="1050" y="129" class="info">角：60°,300°,60°,60°,60°</text>
<polygon points="984.18207,186.00000 1028.06069,186.00000 962.24276,300.00000 1137.75724,300.00000 1028.06069,110.00000" class="poly"/>
<text x="1006.12" y="171.00" class="side">1</text>
<text x="1008.14" y="250.50" class="side">3</text>
<text x="1050.00" y="285.00" class="side">4</text>
<text x="1069.92" y="212.50" class="side">5</text>
<text x="1019.11" y="155.50" class="side">2</text>
<circle cx="984.18" cy="186.00" r="3.3" class="vertex"/>
<text x="1004.73" y="200.24" class="angle">60°</text>
<circle cx="1028.06" cy="186.00" r="3.3" class="vertex"/>
<text x="1028.06" y="211.00" class="angle">300°</text>
<circle cx="962.24" cy="300.00" r="3.3" class="vertex"/>
<text x="977.71" y="280.36" class="angle">60°</text>
<circle cx="1137.76" cy="300.00" r="3.3" class="vertex"/>
<text x="1117.87" y="284.85" class="angle">60°</text>
<circle cx="1028.06" cy="110.00" r="3.3" class="vertex"/>
<text x="1028.06" y="135.00" class="angle">60°</text>
</g>
<g id="p5">
<text x="150" y="390" class="title">第 5 種</text>
<text x="150" y="411" class="info">邊：1-4-2-5-3</text>
<text x="150" y="429" class="info">角：60°,240°,60°,120°,60°</text>
<polygon points="87.31626,491.42857 118.65813,491.42857 181.34187,600.00000 212.68374,545.71429 134.32906,410.00000" class="poly"/>
<text x="102.99" y="476.43" class="side">1</text>
<text x="162.99" y="538.21" class="side">4</text>
<text x="184.02" y="565.36" class="side">2</text>
<text x="160.52" y="485.36" class="side">5</text>
<text x="123.81" y="458.21" class="side">3</text>
<circle cx="87.32" cy="491.43" r="3.3" class="vertex"/>
<text x="111.43" y="498.02" class="angle">60°</text>
<circle cx="118.66" cy="491.43" r="3.3" class="vertex"/>
<text x="140.31" y="503.93" class="angle">240°</text>
<circle cx="181.34" cy="600.00" r="3.3" class="vertex"/>
<text x="172.59" y="576.58" class="angle">60°</text>
<circle cx="212.68" cy="545.71" r="3.3" class="vertex"/>
<text x="191.03" y="533.21" class="angle">120°</text>
<circle cx="134.33" cy="410.00" r="3.3" class="vertex"/>
<text x="137.51" y="434.80" class="angle">60°</text>
</g>
<g id="p6">
<text x="450" y="390" class="title">第 6 種</text>
<text x="450" y="411" class="info">邊：1-5-4-3-2</text>
<text x="450" y="429" class="info">角：60°,120°,60°,60°,240°</text>
<polygon points="384.18207,600.00000 428.06069,600.00000 537.75724,410.00000 362.24276,410.00000 428.06069,524.00000" class="poly"/>
<text x="406.12" y="585.00" class="side">1</text>
<text x="469.92" y="497.50" class="side">5</text>
<text x="450.00" y="425.00" class="side">4</text>
<text x="408.14" y="459.50" class="side">3</text>
<text x="419.11" y="569.50" class="side">2</text>
<circle cx="384.18" cy="600.00" r="3.3" class="vertex"/>
<text x="395.02" y="577.47" class="angle">60°</text>
<circle cx="428.06" cy="600.00" r="3.3" class="vertex"/>
<text x="428.06" y="575.00" class="angle">120°</text>
<circle cx="537.76" cy="410.00" r="3.3" class="vertex"/>
<text x="519.18" y="426.73" class="angle">60°</text>
<circle cx="362.24" cy="410.00" r="3.3" class="vertex"/>
<text x="376.10" y="430.81" class="angle">60°</text>
<circle cx="428.06" cy="524.00" r="3.3" class="vertex"/>
<text x="428.06" y="499.00" class="angle">240°</text>
</g>
<g id="p7">
<text x="750" y="390" class="title">第 7 種</text>
<text x="750" y="411" class="info">邊：1-2-5-3-4</text>
<text x="750" y="429" class="info">角：120°,120°,120°,60°,120°</text>
<polygon points="750.00000,600.00000 781.34187,600.00000 812.68374,545.71429 734.32906,410.00000 687.31626,491.42857" class="poly"/>
<text x="765.67" y="585.00" class="side">1</text>
<text x="784.02" y="565.36" class="side">2</text>
<text x="760.52" y="485.36" class="side">5</text>
<text x="723.81" y="458.21" class="side">3</text>
<text x="731.65" y="538.21" class="side">4</text>
<circle cx="750.00" cy="600.00" r="3.3" class="vertex"/>
<text x="751.11" y="575.02" class="angle">120°</text>
<circle cx="781.34" cy="600.00" r="3.3" class="vertex"/>
<text x="772.06" y="576.79" class="angle">120°</text>
<circle cx="812.68" cy="545.71" r="3.3" class="vertex"/>
<text x="788.57" y="539.12" class="angle">120°</text>
<circle cx="734.33" cy="410.00" r="3.3" class="vertex"/>
<text x="738.22" y="434.70" class="angle">60°</text>
<circle cx="687.32" cy="491.43" r="3.3" class="vertex"/>
<text x="708.97" y="503.93" class="angle">120°</text>
</g>
<g id="p8">
<text x="1050" y="390" class="title">第 8 種</text>
<text x="1050" y="411" class="info">邊：1-3-2-4-5</text>
<text x="1050" y="429" class="info">角：120°,120°,120°,120°,60°</text>
<polygon points="1050.00000,587.27241 1088.00000,587.27241 1145.00000,488.54552 1107.00000,422.72759 955.00000,422.72759" class="poly"/>
<text x="1069.00" y="572.27" class="side">1</text>
<text x="1103.51" y="530.41" class="side">3</text>
<text x="1113.01" y="463.14" class="side">2</text>
<text x="1031.00" y="437.73" class="side">4</text>
<text x="1015.49" y="497.50" class="side">5</text>
<circle cx="1050.00" cy="587.27" r="3.3" class="vertex"/>
<text x="1055.42" y="562.87" class="angle">120°</text>
<circle cx="1088.00" cy="587.27" r="3.3" class="vertex"/>
<text x="1082.58" y="562.87" class="angle">120°</text>
<circle cx="1145.00" cy="488.55" r="3.3" class="vertex"/>
<text x="1120.37" y="492.81" class="angle">120°</text>
<circle cx="1107.00" cy="422.73" r="3.3" class="vertex"/>
<text x="1096.16" y="445.26" class="angle">120°</text>
<circle cx="955.00" cy="422.73" r="3.3" class="vertex"/>
<text x="975.55" y="436.96" class="angle">60°</text>
</g>
</svg>