Изменение заполнения CSS для SVG с помощью JS

Question

Изменение заполнения CSS для SVG с помощью JS

1

Я пытаюсь изменить цвет svg fill, который определяется с помощью css, используя JS. По какой-то причине это не работает. Вот мой код:

Сам SVG (словом):

<svg id="secondalert"><style>.cls-1{fill:#000000;}</style></svg>

И JS нацелиться и изменить его:

function() {
    var svg_css = document.getElementsByClassName('.cls-1');

    if (random_value < 20) {
        svg_css.css({
            "fill": "#EF4136"
        });

    } else {
        svg_css.css({
            "fill": "#EF4136"
        });
    }
}

Что-то не происходит вместе, цвет заливки остается черным, как в теге стиля. Что я делаю неправильно?

Nebular Dust 02 авг. 2017, в 17:51

Источник

0

Как вы вызываете свою функцию ?, также для переопределения встроенных стилей обычно требуется! Важный после свойства.
Royalty 02 авг. 2017, в 15:03
0

Его синтаксис JQuery, а не чистый JavaScript. Попробуйте svg_css.style.fill = "#EF4136"
RaV 02 авг. 2017, в 15:03
1

Возможно, дубликат этого
JSEvgeny 02 авг. 2017, в 15:03
1

Возможный дубликат изменения цвета изображения SVG с помощью JavaScript
JSEvgeny 02 авг. 2017, в 15:04

Показать ещё 2 комментария

Теги:

javascript

css

svg

fill

2 ответа

1

Прежде чем мы перейдем к изменению стиля, нужно обратить внимание на несколько вещей:

var svg_css = document.getElementsByClassName('.cls-1');

Получение элементов по имени класса прекрасное, но . Селектор специфичен для CSS. Это означает, что svg_css будет установлен для любых элементов с классом .cls-1 NOT cls-1.

Во-вторых, нет элементов с классом cls-1 в вашем HTML. Элемент с таким классом будет выглядеть так:

<svg id="secondalert" class="cls-1"></svg>

Я предполагаю, что random_value объявляется где-то в другом месте, но вы, вероятно, хотите случайное значение внутри этой функции.

Что вам нужно сделать, так это получить элементы по имени класса, а затем, если это возвращает список элементов, выберите, какой из них вы хотите (в нашем случае первый). Затем, чтобы установить заливку, используйте свойство style которое имеет fill свойство.

var elements = document.getElementsByClassName('cls-1');
elements[0].style.fill = Math.random()*40 > 20 ? "blue" : "red";

<svg class="cls-1" width="100" height="100" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1417 1632h-1118v-480h-160v640h1438v-640h-160v480zm-942-524l33-157 783 165-33 156zm103-374l67-146 725 339-67 145zm201-356l102-123 614 513-102 123zm397-378l477 641-128 96-477-641zm-718 1471v-159h800v159h-800z"/></svg>

Sven Writes Code 02 авг. 2017, в 13:41

Ещё вопросы

Как вы вызываете свою функцию ?, также для переопределения встроенных стилей обычно требуется! Важный после свойства.
Его синтаксис JQuery, а не чистый JavaScript. Попробуйте svg_css.style.fill = "#EF4136"
Возможный дубликат изменения цвета изображения SVG с помощью JavaScript

Luis Machillanda · Accepted Answer · 2017-08-02T12-12-00.000Z

Вместо использования svg_css.css({"fill": "#hexadecimal"}) вы можете использовать svg_css.style.fill = "#hexadecimal"

А также, когда вы используете getElementsByClassName он возвращает массив, вместо этого используйте getElementById или выбирайте элемент внутри массива:

svg_css = document.getElementsByClassName('.cls-1')[0];