Стильные пользовательские таблицы стилей не работают с узлами SVG

Question

Я нашел странную проблему, и я не уверен, что это ошибка или нормальное поведение. Может, у меня что-то не так?

Я пытаюсь создать обычную стильную таблицу стилей для стилей некоторых элементов SVG. Таблица стилей:

svg circle { 
    fill: #1E90FF; 
    stroke-width: 5; 
    stroke: black; 
} 

Он должен выглядеть следующим образом (без рамки):

стилей отказались работать при размещении в стильный, но работает, когда в документе. Так что я попытался это как фрагмент кода:

svg.A circle { 
 
    fill: #1E90FF; 
 
    stroke-width: 5; 
 
    stroke: black; 
 
}

<svg style="width: 100px" class="A" viewbox="0 0 70 70"> 
 
<circle class="circle" cx="35" cy="35" r="30" /> 
 
</svg> 
 
<svg style="width: 100px" class="B" viewbox="0 0 70 70"> 
 
<circle class="circle" cx="35" cy="35" r="30" /> 
 
</svg> 
 

 
<div id="testdiv"> 
 
This is a reference test div to test that your stylesheet is working. 
 
</div>

И использовал эту таблицу стилей с помощью стильного:

@namespace url(http://www.w3.org/1999/xhtml); 

@-moz-document domain("stacksnippets.net") { 
    #testdiv { 
    color: green; 
    background-color: yellow; 
    } 
    svg.B circle { 
    fill: #1E90FF; 
    stroke-width: 5; 
    stroke: black; 
    } 
} 

И что я вижу это:

Я не могу себе представить почему стильный отфильтровывает стили для CSS, это звучит как вздор.

Answer 1

Update:
Tomáš Zato's answer правильно.
См. the @namespace reference on MDN.

Вы должны включать пространство имен SVG как так:

@namespace url(http://www.w3.org/1999/xhtml); 
@namespace url(http://www.w3.org/2000/svg); 

@-moz-document domain("stacksnippets.net") { 
    #testdiv { 
     color: green; 
     background-color: yellow; 
    } 
    svg.B circle { 
     fill: #1E90FF; 
     stroke-width: 5; 
     stroke: black; 
    } 
} 

---

Стильный не отфильтровывать стилей (Проверьте the source code).
Но он вводит их на уровне Chrome выше/снаружи/перед обычным DOM. _{(Это причина, почему Стильный может исправить CSS без каких-либо раздражающих мерцаний, что userscript-прикладной CSS иногда имеет.)}

Я просто угадать, но может быть есть какая-то проблема с Firefox о SVG и эти виды «внешних DOM» стилей?
Обратите внимание, что ваш стиль отлично работает в Chrome с использованием стильного расширения Chrome.

Альтернативный подход заключается в впрыскивать CSS в DOM, как это так, используя userscript:
(За исключением сценария Greasemonkey/Tampermonkey, просто используйте GM_addStyle().)

function addStyle (cssStr) { 
 
    var D    = document; 
 
    var newNode   = D.createElement ('style'); 
 
    newNode.textContent = cssStr; 
 
    var targ = D.getElementsByTagName ('head')[0] || D.body || D.documentElement; 
 
    targ.appendChild (newNode); 
 
} 
 
addStyle (` 
 
    #testdiv { 
 
     color: red; 
 
     background-color: yellow; 
 
    } 
 
    svg.B circle { 
 
     fill: #1E90FF; 
 
     stroke-width: 5; 
 
     stroke: pink; 
 
    } 
 
`);

svg.A circle { 
 
    fill: #1E90FF; 
 
    stroke-width: 5; 
 
    stroke: black; 
 
}

<svg style="width: 100px" class="A" viewbox="0 0 70 70"> 
 
    <circle class="circle" cx="35" cy="35" r="30" /> 
 
</svg> 
 
<svg style="width: 100px" class="B" viewbox="0 0 70 70"> 
 
    <circle class="circle" cx="35" cy="35" r="30" /> 
 
</svg> 
 
<div id="testdiv"> 
 
    This is a reference div to test if your stylesheet is otherwise working. 
 
</div>

Answer 2

Я не знаю, почему, но этот вопрос решается путем удаления пространства имен часть:

@namespace url(http://www.w3.org/1999/xhtml); 

Это относится как Firefox и Google Chrome. Я не осведомлен о материалах пространства имен, но похоже, что пространство имен XHTML, вероятно, ограничивает CSS-теги HTML.