使用SVG的path畫半圓

<svg class="d3-demo3">
            <defs>
                <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" style="stop-color:#fff143;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#ff8c31;stop-opacity:1" />
                </linearGradient>
                <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" style="stop-color:#c3272b;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#ff8c31;stop-opacity:1" />
                </linearGradient>
            </defs>
            <path d="M 5 200 A 50 50 0 1 1 105 200" stroke="url(#grad1)" stroke-width="10" fill="none" class="one-part"/>
            <path d="M 105 200 A 50 50 0 1 1 5 200" stroke="url(#grad2)" stroke-width="10" fill="none" class="tow-part"/>
        </svg>

成果：兩個半圓連成的一個漸變色圓。

簡介：

<path d="M 5 200 A 50 50 0 1 1 105 200" stroke="url(#grad1)" stroke-width="10" fill="none" class="one-part"/>

A指令用來繪制一段弧線,且.允許弧線不閉合。可以把A命令繪制的弧線想象成是橢圓的某一段,A指令以下有七個參數。

A 50 50 0 1 1 105 200

A  rx  ry  順時針角度  1大弧0小弧  1順時針0逆時針  終點x  終點y

第三個參數，順時針角度，這個參數是針對橢圓弧使用的，如果 rx ry 相等（圓弧）的話，設置這個順時針角度是沒有意義的，默認為0就可以了

 

標准半圓：

 <svg class="d3-demo3">
            <defs>
                <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" style="stop-color:#fff143;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#ff8c31;stop-opacity:1" />
                </linearGradient>
            </defs>
            <path d="M 5 200 A 50 50 0 1 1 105 200" stroke="url(#grad1)" stroke-width="10" fill="none" class="one-part"/>
        </svg>

注意：M為起點坐標，rx,ry為半徑，通過這兩數據計算出我們需要的終點位置。如果計算出的終點不是標准的位置，圓就出現和設置不一樣的半徑的情況

當起點終點間的距離大於直徑時，畫的永遠是半圓，只有起點終點間距離小於半徑才能畫大半圓和小半圓。

<svg class="d3-demo3">
            <defs>
                <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" style="stop-color:#fff143;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#ff8c31;stop-opacity:1" />
                </linearGradient>
                <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" style="stop-color:#c3272b;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#ff8c31;stop-opacity:1" />
                </linearGradient>
            </defs>
            <path d="M 5 200 A 50 50 0 1 1 185 200" stroke="url(#grad1)" stroke-width="10" fill="none" class="one-part"/>
            <path d="M 105 200 A 50 50 0 1 1 5 200" stroke="url(#grad2)" stroke-width="10" fill="none" class="tow-part"/>
        </svg>

亂計算終點的情況：