angular - 通过使用路径宽度/高度在角度 7 中动态设置 SVG Viewbox

Question

我有一个 json 格式的 svg 图标库，有图标名称的键和渲染图标的路径，这些图标都是不同的维度。我有一个图标组件，它消耗 json 并通过插入与其关联的路径来制作 svg。

这是一个 stackblitz 示例：https ://angular-qhpqpu.stackblitz.io

我面临的问题是，对于宽于高的图标，视图框没有正确的比例。如果图标的高度大于宽度，则它可以完美运行。

当另一个组件使用图标组件时，它永远不会在宽图标上正确对齐，因为 svg 视图框不正确。

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

标签： angularsvgangular7

Answer 1

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

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

分叉的 Stackblitz