时尚的自定义样式表不适用于 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>

并通过 Stylish 使用此自定义样式表：

@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

更新：
正确。
参见 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 水平 above/outside/before 正常 DOM 注入它们。 _{（这就是为什么 Stylish 可以修复 CSS 而没有用户脚本应用 CSS 有时会出现的任何烦人的闪烁的原因。）}

~~我只是在猜测，但是也许 Firefox 关于 SVG 和这些类型的 "outside DOM" 样式存在某种问题？~~
请注意，您的样式在 Chrome 中使用 Chrome 时尚扩展效果非常好。

另一种方法是将 CSS 注入 DOM，就像这样，使用用户脚本：
（除了在 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 标签。

时尚的自定义样式表不适用于 SVG 节点

Stylish custom stylesheets do not work with SVG nodes

css

svg

stylish