如何从SVG文件的矩阵值中提取对象宽高？优先PHP实现

PHP 实现（后端处理场景） #

实现思路 #

1. 用DOM解析SVG内容，定位到目标<g id="g1538">元素；
2. 提取该元素下所有<path>的d属性，通过正则匹配出所有坐标点；
3. 找出所有坐标的最小/最大X、Y值，通过差值计算宽高。

代码示例 #

<?php
// 目标SVG的g元素内容
$svgContent = '<g
     id="g1538">
    <path
       id="path1529"
       style="fill:#ff3fff;stroke-width:25;stroke-linejoin:round"
       d="m 1790.6137,1036.8231 a 499.63898,470.75812 0 0 1 -499.639,470.7581 499.63898,470.75812 0 0 1 -499.63895,-470.7581 499.63898,470.75812 0 0 1 499.63895,-470.7581 499.63898,470.75812 0 0 1 499.639,470.7581 z" />
    <g
       aria-label="TEST"
       id="text1533"
       style="font-size:500px;line-height:1.25;font-family:Arial;-inkscape-font-specification:\'Arial, Normal\';font-variant-ligatures:none">
      <path
         d="M 1406.173,964.62091 V 648.94708 h -117.9199 v -42.23633 h 283.6914 v 42.23633 h -118.4082 v 315.67383 z"
         id="path1541" />
      <path
         d="M 1621.505,964.62091 V 606.71075 h 258.7891 v 42.23633 h -211.4258 v 109.61914 h 197.998 v 41.99219 h -197.998 v 121.82617 h 219.7265 v 42.23633 z"
         id="path1543" />
      <path
         d="m 1937.9113,849.63068 44.6777,-3.90625 q 3.1738,26.85547 14.6484,44.18945 11.7188,17.08984 36.1328,27.83203 24.4141,10.49805 54.9317,10.49805 27.0996,0 47.8515,-8.05664 20.752,-8.05664 30.7618,-21.97266 10.2539,-14.16016 10.2539,-30.76172 0,-16.8457 -9.7657,-29.29687 -9.7656,-12.69532 -32.2265,-21.24024 -14.4043,-5.61523 -63.7207,-17.33398 -49.3164,-11.96289 -69.0918,-22.46094 -25.6348,-13.42773 -38.3301,-33.20312 -12.4512,-20.01954 -12.4512,-44.67774 0,-27.09961 15.3809,-50.53711 15.3808,-23.68164 44.9219,-35.88867 29.541,-12.20703 65.6738,-12.20703 39.7949,0 70.0684,12.93945 30.5175,12.69531 46.875,37.59766 16.3574,24.90234 17.5781,56.39648 l -45.4102,3.41797 q -3.6621,-33.93555 -24.9023,-51.26953 -20.9961,-17.33398 -62.2559,-17.33398 -42.9687,0 -62.7441,15.86914 -19.5313,15.625 -19.5313,37.84179 0,19.28711 13.916,31.73828 13.6719,12.45118 71.2891,25.63477 57.8613,12.93945 79.3457,22.70508 31.25,14.4043 46.1426,36.62109 14.8926,21.97266 14.8926,50.78125 0,28.56446 -16.3575,53.95508 -16.3574,25.14648 -47.1191,39.30664 -30.5176,13.91602 -68.8477,13.91602 -48.5839,0 -81.5429,-14.16016 -32.7149,-14.16016 -51.5137,-42.48047 -18.5547,-28.56445 -19.5312,-64.45312 z"
         id="path1545" />
      <path
         d="M 2378.5851,964.62091 V 648.94708 h -117.9199 v -42.23633 h 283.6914 v 42.23633 h -118.4082 v 315.67383 z"
         id="path1547" />
    </g>
  </g>';

// 初始化DOM解析器
$dom = new DOMDocument();
libxml_use_internal_errors(true); // 忽略SVG解析的非致命错误
$dom->loadXML($svgContent);
libxml_clear_errors();

// 定位目标g元素
$gElement = $dom->getElementById('g1538');
if (!$gElement) {
    die('未找到id为g1538的元素');
}

// 提取所有path的坐标
$pathList = $gElement->getElementsByTagName('path');
$coords = [];
$numPattern = '/[-+]?\d+\.\d+|[-+]?\d+/'; // 匹配正负小数/整数

foreach ($pathList as $path) {
    $d = $path->getAttribute('d');
    preg_match_all($numPattern, $d, $nums);
    // 两两分组为(x,y)
    for ($i = 0; $i < count($nums[0]); $i += 2) {
        if (isset($nums[0][$i+1])) {
            $coords[] = [
                'x' => (float)$nums[0][$i],
                'y' => (float)$nums[0][$i+1]
            ];
        }
    }
}

if (empty($coords)) {
    die('未提取到有效坐标点');
}

// 计算边界值
$minX = min(array_column($coords, 'x'));
$maxX = max(array_column($coords, 'x'));
$minY = min(array_column($coords, 'y'));
$maxY = max(array_column($coords, 'y'));

$width = $maxX - $minX;
$height = $maxY - $minY;

echo "宽度：" . number_format($width, 4) . " 单位\n";
echo "高度：" . number_format($height, 4) . " 单位\n";
?>

JavaScript 实现（前端/浏览器场景） #

实现思路 #

利用浏览器内置的SVG API getBBox()，直接获取元素的边界框，该方法会自动计算元素及其子元素的整体范围，包含stroke等样式的影响，无需手动解析坐标。

代码示例 #

// 场景1：页面中已嵌入目标SVG
const targetGroup = document.getElementById('g1538');
if (targetGroup) {
    const boundingBox = targetGroup.getBBox();
    console.log(`宽度：${boundingBox.width.toFixed(4)}`);
    console.log(`高度：${boundingBox.height.toFixed(4)}`);
}

// 场景2：解析SVG字符串
const svgStr = `
<g id="g1538">
    <path id="path1529" style="fill:#ff3fff;stroke-width:25;stroke-linejoin:round" d="m 1790.6137,1036.8231 a 499.63898,470.75812 0 0 1 -499.639,470.7581 499.63898,470.75812 0 0 1 -499.63895,-470.7581 499.63898,470.75812 0 0 1 499.63895,-470.7581 499.63898,470.75812 0 0 1 499.639,470.7581 z" />
    <g aria-label="TEST" id="text1533" style="font-size:500px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:none">
      <path d="M 1406.173,964.62091 V 648.94708 h -117.9199 v -42.23633 h 283.6914 v 42.23633 h -118.4082 v 315.67383 z" id="path1541" />
      <path d="M 1621.505,964.62091 V 606.71075 h 258.7891 v 42.23633 h -211.4258 v 109.61914 h 197.998 v 41.99219 h -197.998 v 121.82617 h 219.7265 v 42.23633 z" id="path1543" />
      <path d="m 1937.9113,849.63068 44.6777,-3.90625 q 3.1738,26.85547 14.6484,44.18945 11.7188,17.08984 36.1328,27.83203 24.4141,10.49805 54.9317,10.49805 27.0996,0 47.8515,-8.05664 20.752,-8.05664 30.7618,-21.97266 10.2539,-14.16016 10.2539,-30.76172 0,-16.8457 -9.7657,-29.29687 -9.7656,-12.69532 -32.2265,-21.24024 -14.4043,-5.61523 -63.7207,-17.33398 -49.3164,-11.96289 -69.0918,-22.46094 -25.6348,-13.42773 -38.3301,-33.20312 -12.4512,-20.01954 -12.4512,-44.67774 0,-27.09961 15.3809,-50.53711 15.3808,-23.68164 44.9219,-35.88867 29.541,-12.20703 65.6738,-12.20703 39.7949,0 70.0684,12.93945 30.5175,12.69531 46.875,37.59766 16.3574,24.90234 17.5781,56.39648 l -45.4102,3.41797 q -3.6621,-33.93555 -24.9023,-51.26953 -20.9961,-17.33398 -62.2559,-17.33398 -42.9687,0 -62.7441,15.86914 -19.5313,15.625 -19.5313,37.84179 0,19.28711 13.916,31.73828 13.6719,12.45118 71.2891,25.63477 57.8613,12.93945 79.3457,22.70508 31.25,14.4043 46.1426,36.62109 14.8926,21.97266 14.8926,50.78125 0,28.56446 -16.3