Как разрешаются конфликты свойства fill в SVG? Как работает наследование?

Question

Я составил SVG и опробовал некие манипуляции свойства fill через JS. Есть три круга. Первый имеет собственный атрибут fill, второй имеет значение none, а третий - наследует свойство от <svg>(?).

В JS пробую манипуляции.

Сначала присваиваю через setAttribute новое значение fill для SVG --> третий круг меняет цвет.
Присваиваю svg.style.fill новое значение --> третий круг снова меняет цвет, но уже "необратимо", повторная операция setAttribute ничего не меняет.
Методом setAttribute меняю все цвета кругов на серый --> все круги становятся серыми
Меняю свойство style.fill --> все цвета успешно меняются.

Каждый последующий шаг безвозвратно переопределяет предыдущий. То есть, свойство style.fill "конечного" элемента имеет наивысший приоритет. При этом я пробовал использовать бОльшую специфичность селекторов при получении элемента - ничего не меняет. Ясное дело - в любом случае я получаю доступ к элементу, это же не CSS.

Так вот вопросы. Что я не учел в своих рассуждениях? Что добавляет к этому всему правила CSS? Так ли просто определяется "конечный" элемент - всегда ли он будет наиболее вложенным? Так ли прямолинейно разрешаются переопределения во вложенных SVG, <g>, <use>, <defs> и т.д.

Одним словом: какие есть подводные камни в вопросах наследования и разрешения конфликтов стилей и определений таких свойств как fill и stroke?

let svg = document.querySelector('svg');

let c1 = svg.getElementById('c1');
let c2 = svg.getElementById('c2');
let c3 = svg.getElementById('c3');

document.querySelector('select').addEventListener('change', e => {
    let val = e.target.value;
    
    switch(val){
        case 'svg.setAttribute': 
            svg.setAttribute('fill', 'orange');
            break;
        case 'svg.style.fill':
            svg.style.fill = 'blue';
            break;
        case 'circles.setAttribute':
            c1.setAttribute('fill', 'gray');
            c2.setAttribute('fill', 'gray');
            c3.setAttribute('fill', 'gray');
            break;
        case 'circles.style.fill':
            c1.style.fill = 'green';
            c2.style.fill = 'red';
            c3.style.fill = 'black';
    }
})

<svg width="600" height="180" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 600 180" fill="pink">
    <circle id="c1" cx="100" cy="90" r="70" stroke="rgb(100,100,200)" stroke-width="3" fill="yellow"/>
    <circle id="c2" cx="300" cy="90" r="70" stroke="rgb(100,100,200)" stroke-width="3" fill="none"/>
    <circle id="c3" cx="500" cy="90" r="70" stroke="rgb(100,100,200)" stroke-width="3" />
</svg>

<select style="position: fixed; top: 0; left: 0">
    <option>none</option>
    <option>svg.setAttribute</option>
    <option>svg.style.fill</option>
    <option>circles.setAttribute</option>
    <option>circles.style.fill</option>
</select>

БЛОГ НА HUSL

Как разрешаются конфликты свойства fill в SVG? Как работает наследование?

Ответы (0 шт):