使用css3為svg元素設置樣式

Question

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

Answer 1

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

rect
{
   fill: blue;
   stroke: black;
}

如果您不想更改所有矩形，可以在SVG中定義類並更改其填充和描邊屬性。

不幸的是，您無法使用CSS更改SVG圖像中的邊框，漸變和陰影。 至少，與使用CSS3在html元素中更改它的方式不同。 不過，你可以以編程方式做很多事情。 例如，如果您在SVG圖像中定義了類似陰影的過濾器 ，則可以通過在CSS中更改其過濾器屬性來動態地將其應用於任何元素：

filter:url(#filterName);

philipp發布的鏈接列出了可以通過CSS更改的所有SVG屬性您可以隨時以編程方式更改SVG，但在您的情況下可能不值得。