我正在制作一个 Angular js 应用程序,我正在使用找到的图标 https://materialdesignicons.com/ 我在项目中创建大图标时遇到问题。我目前正在这样分配图标。
app.config(function($mdIconProvider) {
$mdIconProvider
.defaultIconSet('assets/icon/materialdesignicons.svg')
.iconSet(['large'], 'assets/icon/materialdesignicons.svg');
}); 我知道默认大小是 24px,但如果我输入 48 之类的数字,图像会缩小而不是变大。 我应该放什么而不是大的?
最佳答案
如果您的 icon svg 元素具有 viewBox 属性,它不会被 $mdIconProvider size 属性覆盖。
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 0 12 12"对于 24x24 网格),您将放大到 图标。
- 如果您将尺寸设置为大于网格的尺寸(例如“0 0 48 48"对于 24 x 24 网格),您将使用放置的图标进行缩小 在 svg 元素的左上角。
您可以找到更多详细信息 here .
关于angularjs - Angular svg 图标大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34782161/