2

奇妙な問題を見つけましたが、それがバグなのか正常な動作なのかわかりません。多分私は何か間違っていますか？

いくつかの SVG 要素のスタイルを設定するカスタムのスタイリッシュなスタイルシートを作成しようとしています。スタイルシート:

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

次のようになります (フレームなし)。

画像の説明

Stylesheet は、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

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

スタイリッシュはスタイルを除外しません (ソース コードを調べます)。
ただし、通常のDOMの上/外側/前のChromeレベルでそれらを挿入します。(これが、ユーザー スクリプトを適用した CSS にときどき発生する煩わしいちらつきなしに、Stylish が CSS を修正できる理由です。)

推測にすぎませんが、SVG とこれらの種類の「DOM の外側」のスタイルに関して、Firefox に何らかの問題があるのではないでしょうか?
Chrome Style 拡張機能を使用すると、Chrome でスタイルが完全に機能することに注意してください。

もう 1 つの方法は、ユーザー スクリプトを使用して 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 に答える