本地SVG组Bounding Box提取遇访问限制，如何用Python调用HTML解决？

问题原因 #

直接用浏览器打开本地HTML文件时，由于file://协议的同源策略限制，脚本无法读取同目录的SVG文件，导致svgDoc为null。

解决方案：用Python无头浏览器模拟渲染 #

使用Playwright（无头浏览器工具）加载HTML并执行JS逻辑，既能模拟真实浏览器的渲染环境，又能避开本地文件的访问限制。

步骤1：安装依赖 #

执行以下命令安装Playwright及Chromium浏览器：

pip install playwright
playwright install chromium

步骤2：编写HTML文件（含JS逻辑） #

创建index.html，包含用于解析SVG并获取元素边界的JS函数：

<!DOCTYPE html>
<html>
<body>
<svg id="svg-container" style="visibility: hidden;"></svg>
<script>
function getGroupBounds(svgContent) {
  const svgContainer = document.getElementById('svg-container');
  svgContainer.innerHTML = svgContent;
  
  const svgRect = svgContainer.getBoundingClientRect();
  const groups = svgContainer.querySelectorAll('g');
  const bounds = {};

  groups.forEach((group, index) => {
    const rect = group.getBoundingClientRect();
    // 计算相对于SVG画布的坐标（而非视口）
    const relativeBounds = {
      x: rect.x - svgRect.x,
      y: rect.y - svgRect.y,
      width: rect.width,
      height: rect.height,
      elementId: group.id || `group-${index}`
    };
    bounds[relativeBounds.elementId] = relativeBounds;
  });

  return bounds;
}
</script>
</body>
</html>

步骤3：编写Python脚本 #

创建svg_bounds_extractor.py，用Playwright加载HTML、注入SVG内容、执行JS并导出JSON：

from playwright.sync_api import sync_playwright
import json
import os

def extract_group_bounds():
    # 替换为你的文件路径
    html_path = os.path.abspath("./index.html")
    svg_path = os.path.abspath("./output.svg")
    output_json_path = os.path.abspath("./group_bounds.json")

    with sync_playwright() as p:
        # 启动无头浏览器
        browser = p.chromium.launch(headless=True)
        page = browser.new_page()
        
        # 加载本地HTML文件
        page.goto(f"file://{html_path}")

        # 读取本地SVG内容
        with open(svg_path, 'r', encoding='utf-8') as svg_file:
            svg_content = svg_file.read()

        # 执行JS函数获取边界数据
        group_bounds = page.evaluate("getGroupBounds", svg_content)

        # 写入JSON文件
        with open(output_json_path, 'w', encoding='utf-8') as json_file:
            json.dump(group_bounds, json_file, indent=2, ensure_ascii=False)

        browser.close()
        print(f"边界数据已保存到 {output_json_path}")

if __name__ == "__main__":
    extract_group_bounds()

步骤4：运行脚本 #

执行Python脚本：

python svg_bounds_extractor.py

关键细节 #

• 用getBoundingClientRect()获取渲染后的元素边界，而非getBBox()（后者仅返回元素自身的几何边界，不考虑CSS变换或继承样式）。
• 将SVG内容直接注入页面，绕开了file://协议下的文件读取限制，更可靠。
• SVG容器设置visibility: hidden避免无头浏览器渲染时出现不必要的窗口内容。

内容的提问来源于stack exchange，提问作者Dani