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

希望这有帮助。