kamikadze1996
@kamikadze1996
{[]}

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

У товара есть лэйбл цвет которого выбирается в админке. Как можно подключить svg лэйбл чтобы ему в fill передавать цвет приходящий с сервера?
  • Вопрос задан
  • 1474 просмотра
Пригласить эксперта
Ответы на вопрос 3
@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; ?>" });
Ответ написан
@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>
Ответ написан
politon
@politon
HTML5,CSS3,JS,PHP,SQL,API,canvas,animation...
Попробуй svgmnemo.ru/pub/svgdyn.html
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы