getBBox returns vastly different x and y positions for similar paths-CodePudding

I have an SVG diagram with several paths in it:

For each of the 6 paths present, I call getBBox, to retrieve the X and Y positions (so that I can calculate a midpoint and append some text to the center). Works great.

Except for some nodes, the BBox is huge. Like, as wide as the screen almost. I cannot figure it out. Here is a path giving "normal" BBox values:

<path d="M 300.243 403.205 C 300.243 405.72 299.663 408.102 298.627 410.218 C 306.138 409.212 313.497 406.441 320.057 401.847 L 332.019 418.933 C 304.382 438.283 266.839 435 242.982 411.14 L 257.732 396.396 C 260.945 399.609 264.514 402.29 268.32 404.428 C 268.291 404.025 268.274 403.618 268.274 403.205 C 268.274 394.377 275.431 387.221 284.259 387.221 C 293.088 387.221 300.243 394.377 300.243 403.205 Z" id="midInferior" fill="#b7eb8f"></path>

BBOX: {x: 242.98199462890625, y: 387.22100830078125, width: 89.03701782226562, height: 44.284881591796875}

And one giving odd values:

<path d="M 1582.498388568 609.217735717 A 122.142 122.142 0 0 1 1532.269773089 688.060868994 L 1511.252785308 658.045499787 A 85.5 85.5 0 0 0 1546.413062883 602.854919191 Z" transform="matrix(0.569203, 0, 0, 0.569203, -537.651855, 25.454704)" id="midInferolateral" fill="#b7eb8f"></path>

BBOX: {x: 1511.2528076171875, y: 602.8549194335938, width: 71.24560546875, height: 85.2059326171875}

Any ideas?

CodePudding user response：

One has a transform the other doesn't. getBBox ignores transforms.

The easiest solution to include transforms is to call getBoundingClientRect instead.

document.querySelectorAll("path").forEach(e => console.log(e.getBoundingClientRect()));

<svg>
<path d="M 300.243 403.205 C 300.243 405.72 299.663 408.102 298.627 410.218 C 306.138 409.212 313.497 406.441 320.057 401.847 L 332.019 418.933 C 304.382 438.283 266.839 435 242.982 411.14 L 257.732 396.396 C 260.945 399.609 264.514 402.29 268.32 404.428 C 268.291 404.025 268.274 403.618 268.274 403.205 C 268.274 394.377 275.431 387.221 284.259 387.221 C 293.088 387.221 300.243 394.377 300.243 403.205 Z" id="midInferior"  fill="#b7eb8f"></path>
<path d="M 1582.498388568 609.217735717 A 122.142 122.142 0 0 1 1532.269773089 688.060868994 L 1511.252785308 658.045499787 A 85.5 85.5 0 0 0 1546.413062883 602.854919191 Z" transform="matrix(0.569203, 0, 0, 0.569203, -537.651855, 25.454704)" id="midInferolateral"  fill="#b7eb8f"></path>
</svg>

CodePudding user response：

Just to demonstrate how you can position circle slices and text without running any JavaScript.

<svg viewBox="0 0 100 100" width="300">
  <defs>
    <circle id="pie" r="40" fill="none" stroke="PaleGreen"
      stroke-width="10" stroke-dasharray="0 1 58 360"
      pathLength="360" />
  </defs>
  <g transform="translate(50 50)">
    <use href="#pie" transform="rotate(0)" />
    <use href="#pie" transform="rotate(60)" />
    <use href="#pie" transform="rotate(120)" />
    <use href="#pie" transform="rotate(180)" />
    <use href="#pie" transform="rotate(240)" />
    <use href="#pie" transform="rotate(300)" />
    <text text-anchor="middle" dominant-baseline="central"
      font-size="6">
      <textPath href="#pie" startOffset="30">Test 1</textPath>
      <textPath href="#pie" startOffset="90">Test 2</textPath>
      <textPath href="#pie" startOffset="150">Test 3</textPath>
      <textPath href="#pie" startOffset="210">Test 4</textPath>
      <textPath href="#pie" startOffset="270">Test 5</textPath>
      <textPath href="#pie" startOffset="330">Test 6</textPath>
    </text>
  </g>
</svg>