2

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

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

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

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

图片描述

样式表在放在 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;
  }
}

我看到的是：

图片描述

我无法想象为什么时尚会过滤掉 CSS 的样式，这听起来像是胡说八道。

4

2 回答 2

3

我不知道为什么，但是通过删除命名空间部分解决了这个问题：

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

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

于 2016-02-05T07:09:27.513 回答
2

更新：
Tomáš Zato 的回答是正确的。
请参阅MDN 上的 @namespace 参考。

您需要像这样包含 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 不会过滤掉样式（检查源代码）。
但它确实将它们注入到普通 DOM 之上/外部/之前的 Chrome 级别。（这就是为什么 Stylish 可以修复 CSS 而不会出现用户脚本应用的 CSS 有时会出现的任何烦人的闪烁的原因。）

我只是在猜测，但也许Firefox 存在一些关于 SVG 和这些“外部 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>

于 2016-02-04T18:38:18.423 回答