如何将外部样式表添加到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

希望这有助于。