造型md-icon

你好我正在使用角材料，我想讓md-icon顯示爲圓形圖像。我有一個sideNav和多個視圖。在index.html我有這個：造型md-icon

<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類「儀表板」與類頭像是行不通的，但是當我把所有的內容html到div標記和設置ID儀表板有工作正常，但然後我有我的觀點有問題，因爲我有主div和內容的另一個div。

謝謝

來源

2015-06-29 Panayiotis Irakleous

好像你有一個特殊性的問題。換句話說，材質CSS對於元素更具體，因此覆蓋了你的CSS。解決這個問題的最簡單方法是使用開發工具來檢查元素並查看正在應用哪些規則。然後你可以在你的CSS中使用相同的選擇器來覆蓋它們。 – jme11

@ jme11哪一個元素被看待？ –

好吧，你的目標是md-icon，所以右鍵單擊頁面中的一個圖標，看看指令是如何構造編譯結果的。我會專注於哪個編譯元素首先有你的頭像類。 – jme11

好吧，你今天教了我一些東西。我甚至沒有意識到邊界半徑可以用於svg元素。

修復的方法是瘋狂的簡單：

一個規則只需添加到你的CSS：

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

來源

2015-06-29 13:39:35 jme11

非常感謝你的比賽。你能解釋我爲什麼這樣工作嗎？ –

最好我可以猜測，沒有深入的研究，是因爲內聯SVG本質上是它自己的XML文檔，它不會繼承應用於其父項的CSS，也不一定關心父項被其裁剪邊界半徑。這對我來說很有意義，但仍然不能解釋爲什麼在你的內容中添加另一個div會使你的工作變得很順利。如果我有時間以後，我會看看它（因爲現在我很好奇），看看這種行爲的核心是什麼。 – jme11

回答

相關問題