Как добавить внешнюю таблицу стилей в файл svg?

Question

Я хочу добавить стиль в svg-файл. И таблица стилей будет динамически изменяться. Поскольку моя идея заключается в том, что я хочу изменить значки, заполнить или добавить цвет, изменив тему. Каков процесс, которому я должен следовать?

Answer 1

OK, поэтому вы просто управляете 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 темы, красная тема и синюю тема. Тогда мы бы создать 2 стили в CSS:

.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

Надеется, что это помогает.