如何將SVG 路徑轉換為imageopenpolygon() 函數可識別的坐標數組？

M66 2025-06-12

在PHP 中處理圖像時， imageopenpolygon()是一個很有用的函數，它可以根據一組點繪製一個多邊形。然而，如果你的原始數據是SVG 的路徑（ d屬性），就需要先將SVG 路徑解析成imageopenpolygon()可識別的格式：一個簡單的坐標數組。本文將講解如何一步步完成這個轉換。

理解SVG 路徑與imageopenpolygon() 的區別

SVG Path ( d屬性) ：通常是一串字符串，比如：
```
 M 10 10 L 100 10 L 100 100 L 10 100 Z
```
其中， M表示移動到， L表示直線到， Z表示閉合路徑。
imageopenpolygon() ：需要一個一維數組，格式是： [x1, y1, x2, y2, ..., xn, yn] 。

所以，我們的目標是把SVG 路徑裡的指令翻譯成這樣一個數組。

步驟一：提取SVG 坐標

首先我們要解析SVG 的d屬性字符串，提取出所有有用的坐標。可以通過簡單的正則匹配來做到這一點。

 function parseSvgPathToPoints($svgPath) {
    $commands = preg_split('/(?=[MLZmlz])/', $svgPath, -1, PREG_SPLIT_NO_EMPTY);
    $points = [];

    foreach ($commands as $command) {
        $type = strtoupper(substr(trim($command), 0, 1));
        $coords = trim(substr(trim($command), 1));

        if ($type === 'M' || $type === 'L') {
            $pairs = preg_split('/[\s,]+/', $coords);
            for ($i = 0; $i < count($pairs) - 1; $i += 2) {
                $x = (float)$pairs[$i];
                $y = (float)$pairs[$i + 1];
                $points[] = $x;
                $points[] = $y;
            }
        } elseif ($type === 'Z') {
            // 'Z' 表示閉合路徑，可以選擇性處理（比如復制起點到末尾）
        }
    }

    return $points;
}

小提示：

如果你的SVG 路徑包含C （曲線指令）等複雜指令，這個簡單的解析器是不支持的。這裡我們主要處理基礎的M 、 L和Z 。

步驟二：使用imageopenpolygon() 繪製

一旦拿到了轉換好的坐標數組，繪製多邊形就非常簡單了。

 // 示例 SVG 路徑
$svgPath = 'M 10 10 L 100 10 L 100 100 L 10 100 Z';

// 解析路徑
$points = parseSvgPathToPoints($svgPath);

// 創建圖像
$image = imagecreatetruecolor(200, 200);
$white = imagecolorallocate($image, 255, 255, 255);
$black = imagecolorallocate($image, 0, 0, 0);

imagefill($image, 0, 0, $white);

// 繪製多邊形
imageopenpolygon($image, $points, count($points) / 2, $black);

// 輸出圖像
header('Content-Type: image/png');
imagepng($image);
imagedestroy($image);

訪問這段PHP 文件時，它會直接顯示繪製好的多邊形圖像。如果你想保存文件而不是輸出，可以將imagepng($image, 'your_path.png') 。

步驟三：更複雜場景的處理

如果你有更複雜的SVG 文件（比如從m66.net上下載的圖標庫），你可能需要：

支持相對指令（小寫m/l）
支持曲線（C/Q）
支持複合路徑這些就需要用更強大的SVG 解析器了，比如使用SVGPathData PHP 庫（示例鏈接使用了m66.net域名）。

當然，如果你的需求只是解析基礎形狀，那麼上面的簡單正則足夠用了。

總結

將SVG 路徑轉換為imageopenpolygon()所需格式，核心就是：

按指令拆分SVG 字符串；
提取每對坐標值；
組裝成PHP 所需的一維數組。

掌握了這個流程，你就可以輕鬆地在PHP 中實現SVG 到圖像的繪製！

imageopenpolygon