Question

我发现了一个奇怪的问题，我不确定这是一个错误还是正常行为。也许我有问题？

我正在尝试制作一个自定义时尚样式表来设置一些SVG元素的样式。样式表：

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

它应该看起来像这样（没有框架）：

image description

样式表放在Stylish中时拒绝工作但在文档中有效。所以我尝试将其作为一个片段：

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;
  }
}

而我所看到的是：

image description

我无法想象为什么时尚会过滤掉CSS的样式，这听起来像废话。

Answer 1

我不确定原因，但是通过删除命名空间部分解决了这个问题：

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

这适用于Firefox和Google Chrome。我不了解命名空间的东西，但似乎XHTML命名空间可能会将CSS限制为HTML标记。

Answer 2

<强>更新
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;
    }
}

Stylish不会过滤掉样式（Inspect the source code）但它确实在正常DOM之上/之外/之前的Chrome级别注入它们。 _{（这就是为什么Stylish可以修复CSS而没有用户脚本应用的CSS有时会产生任何烦人的闪烁。）}

~~我只是猜测，但也许 Firefox有关于SVG和这些“外部DOM”风格的某种问题？~~
请注意，使用Chrome Stylish扩展程序，您的风格在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>

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

2 个答案: