HTMLのインラインSVGコードのCSSスタイル設定に問題があります。 HTMLページindex.html、CSSファイルstyle.css、SVGファイルexternal.svgがあります。 SVGファイルでは、シンボルタグでいくつかの六角形のオブジェクトを作成しました。このファイルは、svgオブジェクトのライブラリとしてのみ使用します。 HTMLファイルでは、SVGファイルのオブジェクトを使用しているインラインSVGを使用しています。 CSSファイルは、HTMLファイル内の一部のインラインSVGテキストの色を変更する必要があります。CSSファイル内のスタイル付きインラインSVGテキストの塗りつぶし属性の不自然な動作
これは、HTMLファイルのインラインSVGコードの例です。 <use ...>タグは、SVGファイルからオブジェクトをインポートします。
<svg id="zab4text" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,300,300">
<a xlink:href="https://www.google.com" xlink:title="google">
<use xlink:href="external.svg#hex4" fill="none"/>
<text font-size="40" font-weight="bold" font-family="DejaVu Sans">
<tspan x="55" y="105">first line</tspan>
<tspan x="55" y="150">second line</tspan>
<tspan x="75" y="230">third line</tspan>
</text>
</a>
</svg>
コードのこの部分をスタイルするために使用CSSはこれです：
#zab4text {
width: 150px;
height: 150px;
fill: red;
}
結果は、六角形の赤いテキストでなければなりません。六角形は問題ありませんが、テキストは黒です。 fill属性はテキストに影響を与えません。
私は赤いテキストをしたいときに、<text>タグにIDを直接与えて、それをスタイルする必要があります。その後、それは動作します。
私はgoogle chrome 55の検査官を見ました。 例のようにfill属性がsvgタグの場合、テキストの塗りつぶし色がzab4textから継承されていても、色を設定していないことがインスペクタでわかりました。 fill属性がtextタグの場合は、彼の塗りつぶし色であり、うまくいきました。
Google Chromeでバグがありますか？ 最初にHTMLページを開いたとき、色は赤でしたが、リンクを開くと、色が黒に変わり、赤を戻すことができませんでした。 私はfirefox 50と同じ動作で試しました。
私はGoogle Chromeの外部ファイルの動作について知っていますが、私は単純なpython3ウェブサーバーsudo python3 -m http.server 80を使用しています。
誰かが私が間違っていることを知っていますか、どこに問題がありますか？
うまく動作するようです：https://codepen.io/anon/pen/gLNpav –
@Bram \ Vanroy：あなたのリンクに黒い文字が表示されています。 – trinarSK
これはGoogleクロームブラックだけです。 Firefoxでは、それは赤でなければなりません。 – trinarSK