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 回答