如何將外部樣式表添加到svg文件中？

Question

我想將樣式表添加到svg文件中。樣式表將會動態變化。因爲我的想法是我想通過更改主題來更改圖標填充或庫存顏色。我需要遵循的過程是什麼？

Answer 1

好的，所以你只需要像在頁面上的其他元素一樣控制SVG及其元素，假設你的SVG是內聯的。

所以說，我們有我們的SVG：

<svg id="my_icon" class="red-theme" height="100" width="100" fill="red"> 
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" /> 
</svg> 

而且我們有2個主題，紅色主題和藍色的主題。 然後，我們將在CSS創建2款：

.red-theme{ 
    fill: red; 
} 
.blue-theme{ 
    fill: blue; 
} 

然後我們可以使用jQuery（在這個例子中，但你可以使用其他選項）通過改變一個按鈕按下SVG的主題動態地更改主題。

$('button').click(function(){ 
    var p_class = $('#my_icon').attr('class') 
    if (p_class == 'red-theme'){ 
    $('#my_icon').attr('class', 'blue-theme') 
    } else { 
    $('#my_icon').attr('class', 'red-theme') 
    } 
}); 

總之它會是這個樣子：

http://codepen.io/ballerton/pen/GZGrZe

希望這有助於。