我有一个json格式的svg图标库,图标名称和渲染图标的路径都有键,这些图标都是不同的维度。 我有一个图标组件,它使用 JSON 并通过插入与其关联的路径来制作 svg。
下面是一个堆栈闪电战示例: https://angular-qhpqpu.stackblitz.io
我面临的问题是,对于宽于高度的图标,视图框没有正确的比例。如果图标的高度大于宽度,则它可以完美工作。
当另一个组件使用图标组件时,它永远不会在宽图标上正确对齐,因为 svg 视图框不正确。
如何使视框与其内部路径完全成比例?
为了使视图框与路径完全成比例,您需要确保不要忘记从SVGGraphicsElement.getBBox((方法返回的最小x值和最小y值:
const { x, y, width, height } = this.iconPath.nativeElement.getBBox();
this.viewBoxValue = `${x} ${y} ${width} ${height}`;
分叉堆叠闪电战