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

Posted 2023-01-09

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

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

对于每个路径，我已经计算了精确的width和height bbox值（以像素为单位），我希望它们可以按比例缩小到渲染。这些值是正确的，并且（在需要时）将保留路径的纵横比。在不更改缩放比例（scale(1)）的情况下，路径的默认大小非常大（数百个像素），覆盖了很多svg。

我发现，一旦知道scale（1）上给定路径的原始宽度和高度值，就可以将width除以原始宽度，将height除以原始高度，得到得到我要寻找的比例值。但是，此方法需要首先在scale（1）处渲染路径以确定原始尺寸。

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

---

更新

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

答案

None

另一答案

viewBox reference

Excellent in-depth article regarding SVG coordinate system

一个简单的例子：

<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");