使用路径宽度/高度

Question

我有一个json格式的svg图标库，其中有用于图标名称的键和用于呈现图标的路径，这些图标都是不同尺寸的。我有一个使用json并通过插入与之关联的路径制作svg的图标组件。

这是一个令人震惊的示例：https://angular-qhpqpu.stackblitz.io

面临的问题是，对于宽度大于高度的图标，视图框的比例不正确。如果图标的高度大于宽度，则表示效果很好。

当另一个组件使用了图标组件时，由于svg视图框不正确，因此它永远无法在宽图标上正确对齐。

如何使视图框与其中的路径完全成比例？

Answer 1

为了使视图框与路径完全成比例，您需要确保不要忘记从SVGGraphicsElement.getBBox()方法返回的最小x值和最小y值：

 const { x, y, width, height } = this.iconPath.nativeElement.getBBox();
 this.viewBoxValue = `${x} ${y} ${width} ${height}`;

Forked Stackblitz