angularjs - Angular 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. 如果您的 icon svg 元素具有 viewBox 属性，它不会被 $mdIconProvider size 属性覆盖。

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

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

---

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

• 如果未设置 viewBox，则 svg 元素将不会缩放(这是jQuery 错误)；无论 svg 元素如何，一个单位都是 1px尺寸。
• 如果您将尺寸设置为小于 svg 网格的尺寸(例如“0 012 12"对于 24x24 网格)，您将放大到图标。
• 如果您将尺寸设置为大于网格的尺寸(例如“0 0 4848"对于 24 x 24 网格)，您将使用放置的图标进行缩小在 svg 元素的左上角。

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