Angular svg图标大小

时间:2016-01-14 05:13:46

标签: angularjs svg angular-material

我正在制作角度js应用程序,并且我使用找到的图标https://materialdesignicons.com/ 我在项目中创建大图标时遇到问题。我目前正在分配这样的图标。

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

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

2 个答案:

答案 0 :(得分:1)

  1. 如果您的图标svg元素具有viewBox属性,则$ mdIconProvider size属性不会覆盖它。

  2. size参数定义viewBox高度和宽度。 viewBox仅影响SVG元素的坐标系。它应该与您的图标的尺寸相匹配;如果它们不匹配,md-icon可能会显示图标的放大/缩小视图。

    但是,md-icon元素的实际大小将由其高度和宽度定义(用css定义); SVG元素将在md-icon内放大和缩小。

  3. viewBox是要求扩展svg元素的要求。它设置要显示的网格的哪个部分以及svg元素中的元素应如何与其一起缩放。它只是没有决定用md-iconelement大小增长的图标的实际大小。

    • 如果未设置viewBox,则svg元素将无法缩放(即 jQuery bug);无论svg元素如何,一个unite将是1px 大小
    • 如果将大小设置为小于svg网格的大小(例如“0 0” 12 12“对于24x24网格”,您将放大到左上角 图标。
    • 如果您将大小设置为大于网格的大小(例如“0 0 48” 对于24 x 24网格,48“,您将放大图标缩小 在svg元素的左上角。

    您可以找到更多详细信息here

答案 1 :(得分:1)

我设法弄清楚了问题。该图标被用作按钮,但除了图标外,我还有按钮的md-icon按钮。从按钮中删除类修复了问题。