path命令

SVG中所有基本形狀都是path的簡寫形式，但是建議使用簡寫形式，因為這樣可以使SVG文檔更可讀。

path元素更通用，可以通過制定一系列相互連接的線、弧、曲線來繪制任意形狀的輪廓，這些輪廓也可以填充或者繪制輪廓線，也可以用來定義裁剪區(qū)域或蒙版。

下表為path命令總結(jié)，其中大寫表示絕對坐標(biāo)，小寫表示相對坐標(biāo)：

路徑的填充同樣可以使用fill-rule屬性指定填充規(guī)則，如果需要填充一個中空的形狀，則只需要注意外側(cè)路徑順逆時針方向和內(nèi)側(cè)空心區(qū)域順逆時針方向即可。

繪制一條直線

<path d="M 0,0 L 100,100" />

首先，使用M移動畫筆到起點坐標(biāo)（這里假設(shè)是0,0），然后使用L畫一條直線至終點坐標(biāo)（這里假設(shè)是100,100）。

image.png

繪制一條貝塞爾曲線

這里使用C來繪制一條三次貝塞爾曲線。
三次貝塞爾曲線的每個控制點都有兩個控制點。 因此，要創(chuàng)建三次貝塞爾曲線，需要指定三組坐標(biāo)。

 C x1 y1, x2 y2, x y 

這里的最后一組坐標(biāo)(x,y)指定了線的結(jié)束位置。另外兩個是控制點。(x1,y1)是曲線開始的控制點，(x2,y2)是曲線結(jié)束的控制點?？刂泣c本質(zhì)上描述了從每一點開始的直線的斜率。然后，貝塞爾函數(shù)創(chuàng)建了一條光滑的曲線，從建立的斜率在線的開始，到另一端的斜率。

image.png

<path d="M 0,0 C 50,0 50,100 100,100" />

image.png

示例中該條貝塞爾曲線計算公式為

    const startX = 0, startY = 0, endX = 100, endY = 100;

    const yOffset = Math.abs(endY - startY) / 2;
    const centerY = endY < startY ? endY + yOffset : endY - yOffset;

    const xOffset = Math.abs(endX - startX) / 2;
    const centerX = endX < startX ? endX + xOffset : endX - xOffset;

    const pathAttr = `M ${startX},${startY} C ${centerX},${startY} ${centerX},${endY} ${endX},${endY}`;

marker元素

marker元素用來在path上添加一個標(biāo)記，比如箭頭之類的。

首先需要定義好marker元素，然后在path中引用，一個marker標(biāo)記是一個獨立的圖形，有自己的私有坐標(biāo)。

    <defs>
        <marker id="triangle" markerUnits="strokeWidth" markerWidth="5" markerHeight="4" refX="0" refY="2" orient="auto">
            <path d="M 0 0 L 5 2 L 0 4 z" />
        </marker>
    </defs>
    <path d="M 0,0 L 100,100" stroke="black" stroke-width="2" fill="none"
                style="marker-end: url(#triangle);" />

image.png

首先，我們使用marker畫一個箭頭。設(shè)置orient為auto，使箭頭的方向自動旋轉(zhuǎn)匹配路徑的方向。
然后，可以在連接線的path中使用marker-start,marker-mid,marker-end,marker屬性來設(shè)置標(biāo)記的位置。

• marker-start 屬性將在給定形狀的第一個頂點繪制的箭頭或多邊形標(biāo)記。
  

  image.png

• marker-mid 屬性將在給定形狀的所有內(nèi)部頂點繪制的箭頭或多邊形標(biāo)記。
  

  image.png

• marker-end 屬性將在給定形狀的最終頂點繪制箭頭或者多邊形標(biāo)記。
  

  image.png

• marker 屬性，則表示同時設(shè)置marker-start,marker-mid,marker-end三個屬性。

這里，我們使用marker-end在線的結(jié)尾加上箭頭。

示例

<svg width="100%" height="100%">
        <g transform="translate(0,0) scale(1)">
            <g>
                <defs>
                    <marker id="triangle" markerUnits="strokeWidth" markerWidth="5" markerHeight="4" refX="0" refY="2" orient="auto">
                        <path d="M 0 0 L 5 2 L 0 4 z" />
                    </marker>
                </defs>
                <path d="M 0,0 L 100,100" stroke="black" stroke-width="2" fill="none"
                    style="marker-end: url(#triangle);" />
            </g>
            <g>
                <defs>
                    <marker
                        id="triangle"
                        markerUnits="strokeWidth"
                        markerWidth="5"
                        markerHeight="4"
                        refX="0"
                        refY="2"
                        orient="auto">
                        <path d="M 0 0 L 5 2 L 0 4 z" />
                    </marker>
                </defs>
                <path d="M 100,0 C 150,0 150,100 200,100" stroke="black" stroke-width="2" fill="none"
                    style="marker-end: url(#triangle);" />
            </g>
        </g>
    </svg>

image.png