Question

你好我正在使用角度材料，我想让md-icon显示为圆形图像。我有一个sideNav和多个视图。在index.html我有这个：

<div layout="column" role="main" tabindex="-1" ui-view="" flex>

</div>

我在里面展示我的观点。现在在我的一个视图中，我有一个工具栏和一个列表如下：

<md-toolbar md-scroll-shrink>
    <div class="md-toolbar-tools">
    </div>
</md-toolbar>

<md-content id="dashboard">
    <md-list>
         <md-list-item class="md-3-line" ng-repeat="item in dashboard.todos">
             <md-icon md-svg-icon="svg-1" class="avatar"></md-icon>    
         </md-list-item>
    </md-list>
</md-content>

和dashboard.avatar

的syling的css文件

#dashboard .avatar {
   position: relative;
   width: 128px;
   height: 128px;
   border: 1px solid #ddd;
   border-radius: 50%;
   display: inline-block;
   overflow: hidden;
   margin: 0px;
   vertical-align: middle;
   zoom:0.70;
   transform: translateZ(0);
   -webkit-transform: scale(0.70);
   -moz-transform:scale(0.70);
}

为什么样式没有出现在图标上？
我意识到id＆＃34;仪表板＆＃34;与班级头像不起作用，但当我把所有的内容html放入div标签并设置id仪表板有工作正常但我的观点有问题，因为我有主div，然后另一个div与内容

谢谢

Answer 1

好的，你今天教我一些东西。我甚至没有意识到border-radius会对svg元素起作用。

修复很简单：

只需在css中添加一条规则：

.avatar svg {
  border-radius: 50%;
}

造型md图标

1 个答案: