使用路径宽度/高度以角度7动态设置SVG Viewbox

问题描述 投票:1回答:1

我有一个json格式的svg图标库,有图标名称和渲染图标的路径,这些图标都是不同的尺寸。我有一个图标组件,它消耗json并通过插入与之关联的路径生成一个svg。

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

我面临的问题是,视图框对于比它们更高的图标没有正确的比例。如果图标的高度大于宽度,则效果非常好。

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

如何使视图框与其内部的路径完全成比例?

angular svg angular7
1个回答
0
投票

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

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

Forked Stackblitz

© www.soinside.com 2019 - 2024. All rights reserved.