使用css3設計svg元素

Question

我正在爲web應用程序使用ui。我完成了html5/css3部分，剩下的唯一東西就是幾個svg元素。問題是我對應用程序有不同的主題，所以我不確定如何設置這些svg元素的樣式，以便它們隨着主題而變化。我想一種方法是爲每個主題製作不同的.svg文件，但有沒有辦法給出一個svg元素（它可以包含在html文件中，它不一定是外部文件）邊框，漸變，陰影等只使用CSS？

Answer 1

您可以使用CSS通過筆觸和填充屬性更改SVG元素的顏色。舉例來說，你可以做類似：

rect 
{ 
    fill: blue; 
    stroke: black; 
} 

如果你不想改變，再說，所有的矩形，你可以在你的SVG定義類，並改變他們的填充和描邊屬性爲好。

不幸的是，您無法使用CSS在SVG圖像中更改邊框，漸變和陰影。至少，不會以與使用CSS3的html元素相同的方式更改它。儘管你可以通過編程來做很多事情。舉例來說，如果你在你的SVG圖像定義shadow-like filters，可以動態地將其通過CSS改變其過濾性能適用於任何元素：

filter:url(#filterName); 

張貼由菲利普鏈接列出all SVG attributes that can be changed through CSS 您可以隨時更改您的SVG以編程方式，但它可能不值得在你的情況下的麻煩。