获取<svg>元素的有效viewbox？

Question

<svg>

元素允许具有

viewBox

和

preserveAspectRatio

属性，它们共同确定屏幕上显示的实际视图框。

viewBox

属性指定 SVG 坐标中的矩形，它隐式指定长宽比。此纵横比通常可能与 SVG 元素的纵横比不同。

preserveAspectRatio

属性指定是否调整缩放以使整个指定的视图框适合SVG元素或调整缩放以使整个SVG元素适合指定的视图框，以及执行此调整时的对齐方式。

在 JavaScript 中，我想将鼠标位置 (

offsetX

/

offsetY

) 转换为 SVG 坐标。这就需要找出从屏幕/偏移坐标到 SVG 坐标的转换，这取决于 SVG 视图框。 SVG 是否公开了我可以简单调用来获取计算视图框的任何接口，而不是通过

viewBox

和

preserveAspectRatio

属性手动计算实际的 SVG 视图框（与 SVG 元素具有相同的宽高比）？

Answer 1

我猜你需要的是一个

DOMPoint 及其根据 SVG DOMMatrix 的相对位置。这就是我所能解释的。

因此，这里是 SVG 高度被压缩的示例，您可以看到单击的点与 viewBox 大小相匹配。

const svg = document.getElementById('svg01');
const print = document.getElementById('print');

const toSVGPoint = (svg, x, y) => {
  let p = new DOMPoint(x, y);
  return p.matrixTransform(svg.getScreenCTM().inverse());
};

svg.addEventListener('click', e => {
  let p = toSVGPoint(e.target, e.clientX, e.clientY);
  print.textContent = `x: ${p.x} - y: ${p.y}`;
});

svg {
  border: thin solid black;
  cursor: pointer;
}

<p id="print">Position</p>
<svg id="svg01" xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 1000 500" preserveAspectRatio="none"
  width="400" height="150">
  <text font-size="100" x="50%" y="50%" dominant-baseline="middle"
  text-anchor="middle" pointer-event="none">Click me...</text>
</svg>