Как динамически менять цвет svg?

Question

[Илья Пирожок]

У товара есть лэйбл цвет которого выбирается в админке. Как можно подключить svg лэйбл чтобы ему в fill передавать цвет приходящий с сервера?

Answer 1

[predatorscorpion]

Если я правильно понял, то можно сделать так:
В переменную $color записываем цвет, который берем с админки, и в svg выводим значение, например:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">

<path id="path1" fill="<?= $color; ?>" stroke="#231F20" stroke-miterlimit="10" d="M291.451,51.919v202.54c0,0,164.521,119.846,140.146,0
    C407.227,134.613,291.451,51.919,291.451,51.919z"/>

</svg>

Или можно использовать jQuery:
$('#path1').css({ fill: "<?= $color; ?>" });

Comments

[Илья Пирожок]

Я так и сделал, а можно ли без вставки svg в код? Чтобы подключать внешний svg файл и задавать ему цвет

[predatorscorpion]

Если подключать как <img src="file.svg" alt="svg" /> , то скорее всего нельзя.

Answer 2

[lnked]

В цсс добавить:
svg { color: currentColor; }

в хтмл использовать такую конструкцию

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <defs>
        <symbol id="icon"><path d="M0 .5L.5 0 7 6.5 13.5 0l.5.5L7.5 7l6.5 6.5-.5.5-3-3L7 7.5.5 14l-.5-.5L6.5 7 0 .5z" fill-rule="evenodd"/></symbol>
    </defs>
</svg>

<div class="label" style="color: red">
    <svg role="image">
        <use xlink:href="#icon"/>
    </svg>
</div>

Comments

[Илья Пирожок]

Можете понятнее объяснить смылс такого решения?

[lnked]

Илья Пирожок: Можно использовать одну и ту же иконку сколько угодно раз, иконка загружается сразу без моргания, можно задать любой цвет для каждой отдельной иконки

Answer 3

[Олег]

Попробуй svgmnemo.ru/pub/svgdyn.html