如何获取SVG元素在父元素应用CSS旋转后的实际边界框？

我明白你遇到的困扰了——当父元素加了CSS旋转后，不管用getBoundingClientRect()还是getBBox()，拿到的都不是你想要的SVG实际内容的最小包围盒：前者返回的是包含SVG透明区域的旋转后矩形，后者又只拿得到SVG内部图形的原始未旋转边界。别担心，我们可以通过以下步骤解决这个问题：

核心思路 #

要得到旋转后图形的最小贴合包围盒，我们需要：

• 先拿到SVG内部实际图形（比如你的path元素）的原始边界
• 把这个边界的四个顶点，应用父元素的旋转变换
• 找出变换后所有顶点的最大、最小坐标，以此计算出最终的包围盒

具体实现步骤 #

1. 锁定目标图形的原始边界：找到SVG里的实际图形元素（比如path），用getBBox()拿到它的原始位置和尺寸，这样就排除了SVG的透明区域。
2. 获取父元素的变换规则：通过getComputedStyle获取父元素的变换属性，转换成可计算的变换矩阵。
3. 转换顶点坐标：把原始边界的四个顶点（左上、右上、左下、右下）应用变换矩阵，得到旋转后的实际坐标。
4. 计算最终包围盒：遍历变换后的所有顶点，找出最大/最小的x、y值，从而确定包围盒的位置、宽度和高度。

完整代码示例 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<button id="get-actual-bounds">获取实际边界框</button>
<div id="box"></div>
<div id="bounding-border"></div>

CSS

#box {
  position: absolute;
  left: 100px;
  top: 100px;
  width: 100px;
  height: 150px;
  /* 父元素旋转效果 */
  transform: rotate(60deg);
}

svg path:hover {
  fill: red;
}

#bounding-border {
  position: absolute;
  border: 2px solid green;
  z-index: -1;
}

JavaScript

$(function() {
  // 初始化SVG元素
  let svgString = '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 425.58 635.88"><defs><style>.cls-1{fill:#000000;fill-rule:evenodd;}</style></defs><title>1</title><path id="path" class="cls-1" d="M918.94,831.44c-103,110.83-133.9,110.83-236.86,0-68.44-73.68-80.26-150.84-84.92-241.2-4.22-81.95-26.86-194.68,18.05-248.36,70.51-84.25,300.09-84.25,370.59,0,44.92,53.68,22.28,166.41,18.06,248.36C999.2,680.6,987.39,757.77,918.94,831.44Z" transform="translate(-587.72 -278.69)"/></svg>'
  let svgElement = new DOMParser().parseFromString(svgString, 'text/xml').documentElement
  $('#box').html(svgElement)
  
  // 点击按钮获取实际边界
  $('#get-actual-bounds').click(function() {
    const pathElement = svgElement.querySelector('#path');
    if (!pathElement) return;
    
    // 1. 获取path的原始边界，并转换为页面坐标
    const bbox = pathElement.getBBox();
    const svgRect = svgElement.getBoundingClientRect();
    const parentRect = $('#box')[0].getBoundingClientRect();
    
    // 计算SVG的缩放比例（viewBox到实际显示尺寸）
    const svgScaleX = svgRect.width / svgElement.viewBox.baseVal.width;
    const svgScaleY = svgRect.height / svgElement.viewBox.baseVal.height;
    
    // 生成原始边界的四个顶点（页面坐标）
    const points = [
      { x: bbox.x * svgScaleX + svgRect.left, y: bbox.y * svgScaleY + svgRect.top },
      { x: (bbox.x + bbox.width) * svgScaleX + svgRect.left, y: bbox.y * svgScaleY + svgRect.top },
      { x: bbox.x * svgScaleX + svgRect.left, y: (bbox.y + bbox.height) * svgScaleY + svgRect.top },
      { x: (bbox.x + bbox.width) * svgScaleX + svgRect.left, y: (bbox.y + bbox.height) * svgScaleY + svgRect.top }
    ];
    
    // 2. 获取父元素的变换矩阵
    const parentStyle = window.getComputedStyle($('#box')[0]);
    const transformMatrix = new WebKitCSSMatrix(parentStyle.transform);
    
    // 3. 对每个顶点应用父元素的变换
    const transformedPoints = points.map(point => {
      // 先转成父元素内的相对坐标
      const relativeX = point.x - parentRect.left;
      const relativeY = point.y - parentRect.top;
      // 应用变换
      const transformed = transformMatrix.transformPoint({ x: relativeX, y: relativeY });
      // 转回页面坐标
      return { x: transformed.x + parentRect.left, y: transformed.y + parentRect.top };
    });
    
    // 4. 计算最终的包围盒范围
    let minX = Infinity, maxX = -Infinity;
    let minY = Infinity, maxY = -Infinity;
    transformedPoints.forEach(p => {
      minX = Math.min(minX, p.x);
      maxX = Math.max(maxX, p.x);
      minY = Math.min(minY, p.y);
      maxY = Math.max(maxY, p.y);
    });
    
    // 更新边界框样式
    $('#bounding-border').css({
      left: minX + 'px',
      top: minY + 'px',
      width: (maxX - minX) + 'px',
      height: (maxY - minY) + 'px'
    });
  });
});

效果说明 #

运行代码后点击按钮，你会看到绿色边框完美贴合旋转后的SVG图形，这就是你想要的实际边界效果——完全排除了SVG的透明区域，只围绕真实图形内容。

备注：内容来源于stack exchange，提问作者Barry