角度svg图标大小

Question

我正在制作一个angular js应用程序，我使用的是在我的项目中创建大图标时遇到问题的图标https://materialdesignicons.com/。我现在是这样分配图标的。

app.config(function($mdIconProvider) {
$mdIconProvider
    .defaultIconSet('assets/icon/materialdesignicons.svg')
    .iconSet(['large'], 'assets/icon/materialdesignicons.svg');

})；我知道默认大小是24px，但是如果我输入一个像48这样的数字，图像就会缩小而不是变大。我应该放什么而不是大号的？

Answer 1

1. 如果你的图标svg元素有一个viewBox属性，它不会被$mdIconProvider大小属性覆盖。
2. viewBox参数定义了大小的高度和宽度。viewBox只影响SVG元素的坐标系。它应该与图标的尺寸匹配；如果它们不匹配，md-icon可能会显示图标的放大/缩小视图。

但是，md-icon元素的实际大小将由其高度和宽度定义(使用css定义)；SVG元素将在md-icon内部进行放大和缩小。

viewBox是扩展svg元素的必要条件。它设置要显示其网格的哪一部分，以及svg元素中的元素应如何随其缩放。它只是不决定图标的实际大小，而是随着md-iconelement的大小而增长。

• 如果没有设置viewBox，svg元素将不会缩放(这就是jQuery的错误)；无论svg元素的大小如何，一个单位都将是1px。
• 如果将大小设置为小于svg网格的值(例如，对于24x24的网格，设置为"0 0 12 12“)，则将放大图标的左上角。
• 如果将大小设置为大于网格的值(例如，对于24 x 24的网格，设置为"0 0 48”)，将缩小放置在svg元素左上角的图标。

你可以在here上找到更多详细信息。

Answer 2

我设法弄清楚了问题所在。图标被用作按钮，但除了图标之外，我还有md- icon -button类作为按钮。从按钮中删除类解决了这个问题。