SVG路徑參數(shù)中的終點(diǎn)坐標(biāo)為什么是-.1 0，而不是0 0？

深入理解SVG路徑參數(shù)及應(yīng)用

SVG路徑（path）是創(chuàng)建復(fù)雜矢量圖形的強(qiáng)大工具。本文通過一個(gè)案例分析，幫助您更透徹地理解SVG路徑參數(shù)。

案例研究

我們分析以下路徑命令：

offset: path("m 100,0 a 100 100 0 1 1 -.1 0 z");

重點(diǎn)在于理解a命令的終點(diǎn)坐標(biāo)為何是-.1 0而非0 0，以及大小寫字母a和z的含義。

路徑命令詳解

SVG路徑命令主要包括：

• m x y：移動(dòng)畫筆到坐標(biāo)(x, y)。
• l x y：從當(dāng)前位置繪制直線到(x, y)。
• h x：水平繪制直線到x坐標(biāo)。
• v y：垂直繪制直線到y(tǒng)坐標(biāo)。
• z：閉合路徑。
• c x1 y1, x2 y2, x y 或 c dx1 dy1, dx2 dy2, dx dy：繪制三次貝塞爾曲線。
• q x1 y1, x y 或 q dx1 dy1, dx dy：繪制二次貝塞爾曲線。
• a rx ry x-axis-rotation large-arc-flag sweep-flag x y 或 a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy：繪制橢圓弧。

橢圓弧命令詳解

a命令的語法如下：

a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

• rx, ry：橢圓半徑。
• x-axis-rotation：橢圓繞x軸旋轉(zhuǎn)角度。
• large-arc-flag：繪制大弧(1)或小弧(0)。
• sweep-flag：弧線方向，順時(shí)針(1)或逆時(shí)針(0)。
• dx, dy：相對(duì)于當(dāng)前位置的終點(diǎn)坐標(biāo)偏移量。

在案例中：

a 100 100 0 1 1 -.1 0

• 100 100：半徑為100。
• 0：無旋轉(zhuǎn)。
• 1 1：大弧，順時(shí)針。
• -.1 0：終點(diǎn)坐標(biāo)偏移量。

為什么終點(diǎn)坐標(biāo)是-.1 0？

如果終點(diǎn)是0 0，則會(huì)繪制一個(gè)完整的圓，而-.1 0的微小偏移，使得繪制的弧幾乎是完整的圓，但并非完全閉合，從而避免了起點(diǎn)和終點(diǎn)完全重合。

大小寫字母的差異

• 大寫字母：絕對(duì)坐標(biāo)，相對(duì)于SVG畫布原點(diǎn)。
• 小寫字母：相對(duì)坐標(biāo)，相對(duì)于當(dāng)前位置。

案例中使用小寫字母a和z，表示坐標(biāo)是相對(duì)當(dāng)前位置的，提高了代碼的可讀性和靈活性。

通過以上分析，相信您對(duì)SVG路徑參數(shù)有了更深入的理解。 掌握這些知識(shí)，您就能更靈活地運(yùn)用SVG路徑創(chuàng)建各種復(fù)雜的圖形。