angularjs - Angular svg 图标大小

标签 angularjs svg angular-material

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

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

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

最佳答案

  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 0 12 12"对于 24x24 网格),您将放大到 图标。
  • 如果您将尺寸设置为大于网格的尺寸(例如“0 0 48 48"对于 24 x 24 网格),您将使用放置的图标进行缩小 在 svg 元素的左上角。

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

关于angularjs - Angular svg 图标大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34782161/

相关文章:

Dart Angular 2 和 Material Design 组件

angular - 对话框不适用于 Angular Material

javascript - 从 js 代码中清除 Kendo DatePicker 时,Angular 模型未更改

javascript - Angular Material md-select 不显示错误

java - 如何使用 JFreeChart 创建 SVG?

css - IE Edge 显示 IE 9 hack

angular - 当用户单击 mat-calendar 中的月份导航时,如何检索月份和年份值?

javascript - AngularJS 加载个人用户配置文件

javascript - AngularJS 指令未显示在源 HTML 中

javascript - 单击按钮打开一个新窗口并用 D3 画一个大圆圈