svgdotjs / svgdom

Straightforward DOM implementation to make SVG.js run headless on Node.js
MIT License
275 stars 54 forks source link

getBBox returns incorrect value #89

Open testerez opened 2 years ago

testerez commented 2 years ago

Hello,

I noticed while using svg.js that getBBox was returning different measurements in node or browser (I already opened an issue about it). I suspected the issue came from svgdom and in fact it does.

Here is the value I get in node:

import { registerWindow, SVG } from '@svgdotjs/svg.js';
import { createSVGWindow } from 'svgdom';

const window = createSVGWindow();
const { document } = window;
registerWindow(window, document);

const div = document.createElement('div')
div.innerHTML = `
  <svg>
      <path d="M126.32 126.32C155.22 97.43 155.22 50.57 126.32 21.67C97.42 -7.22 50.57 -7.22 21.67 21.67C-7.22 50.57 -7.22 97.43 21.67 126.32C50.57 155.22 97.42 155.22 126.32 126.32Z " fill="black"></path>
  </svg>
  `;
console.log(div.querySelector('path').getBBox().width); // 126.32499999999997

Whereas, in the browser, I get a different value:

const div = document.createElement('div')
div.innerHTML = `
  <svg>
      <path d="M126.32 126.32C155.22 97.43 155.22 50.57 126.32 21.67C97.42 -7.22 50.57 -7.22 21.67 21.67C-7.22 50.57 -7.22 97.43 21.67 126.32C50.57 155.22 97.42 155.22 126.32 126.32Z " fill="black"></path>
  </svg>
`;
document.body.appendChild(div);
console.log(div.querySelector('path').getBBox().width); // 147.99249267578125
testerez commented 2 years ago

For info, svg-path-bbox is calculating the bbox as expected:

> npx svg-path-bbox "M126.32 126.32C155.22 97.43 155.22 50.57 126.32 21.67C97.42 -7.22 50.57 -7.22 21.67 21.67C-7.22 50.57 -7.22 97.43 21.67 126.32C50.57 155.22 97.42 155.22 126.32 126.32Z"
0.002500000000000763 0.002500000000000763 147.99499999999998 147.99499999999998

(width = 147.99499999999998 - 0.002500000000000763 = 147.99249999999998)