预先计算 svg 路径的比例为给定的宽度和高度

Question

假设我有一个带有路径的任意 svg：

<svg>
<g>
<path d="...." />
</g>
<g>
<path d="...." />
</g>
</svg>

对于每个路径，我已经计算了我希望它们在渲染时缩小到的确切宽度和高度bbox 值(以像素为单位(。这些值是正确的，并且(在需要时(将保留路径的纵横比。 由于缩放(scale(1)(没有变化，路径的默认大小非常大(数百像素(，覆盖了很多svg。

我已经发现，一旦我知道 scale(1( 处给定路径的原始宽度和高度值，那么我就可以将宽度除以原始宽度和高度以原始高度以获得我正在寻找的比例值。但是，此方法需要首先以 scale(1( 渲染路径以确定原始尺寸。

有没有办法在渲染 svg 之前计算大小宽度和高度路径的transform: scale(x)值？还是我缺少其他有益的缩放方法或因素？我正在使用 jsx/React 组件来渲染 svg，尽管这可能无关紧要。

---

更新

SVG.js 库通过缩放路径字符串本身而不是使用转换来解决此问题。这不如vanilla js有效，但仍然相当快。

Answer 1

将路径设置为可见性：隐藏，然后仅在缩放后显示它们。然后，您可以按比例(1(渲染它们，计算所需的比例，并且没有影响工作的可见伪影。

Answer 2

您是否尝试过在父 SVG 元素上操作 viewBox 属性？

视图框引用

关于 SVG 坐标系的优秀深度文章

一个简单的例子：

<svg id="my-svg">
<g style="background:white;">
<path d="M0,0 L0,6 L9,3 z" fill="#003" />
</g>
</svg>

然后下面的javascript作为一个简单的例子：

let svg = document.getElementById("my-svg");
svg.setAttribute("viewBox", "0, 0, 100, 80");