次のSVGグラフィックがあります。
_<svg width='36' height='30'>
<defs>
<linearGradient id="normal-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(81,82,84); stop-opacity:.4"/>
<stop offset="100%" style="stop-color:rgb(81,82,84); stop-opacity:1"/>
</linearGradient>
<linearGradient id="rollover-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(0,105,23); stop-opacity:.5"/>
<stop offset="100%" style="stop-color:rgb(0,105,23); stop-opacity:1"/>
</linearGradient>
<linearGradient id="active-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(0,0,0); stop-opacity:.4"/>
<stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:1"/>
</linearGradient>
</defs>
<text x="8" y="25" style="font-size: 29px;" font-family="Arial">hello world</text>
</svg>'
_
CSSを介してfill
要素のtext
属性を設定し、ホバー状態に応じてさまざまなグラデーションを切り替えます。これはChrome&Safariでうまく機能しますが、Firefoxではテキストが表示されません。要素を調べると、Firefoxがnone
を末尾に追加していることがわかりましたmy fill: url(#...)
CSS属性。Firebugでnone
キーワードを削除しようとしましたが、Firebugは属性全体を削除するだけです。なぜこれが発生するのですか?
編集:fill
プロパティを設定するCSSを削除し、fill
属性をtext
要素にハードコードすると(インラインstyle
属性を介して)、テキストはすべてのブラウザーで適切に表示されます。
理解した。私のCSSでは、最初にインラインでfillを参照していたのと同じ方法でグラデーションを参照していました。
#myselector {
fill: url('#gradient-id');
}
Firefoxで機能させるには、次のように変更する必要があります。
#myselector {
fill: url('/#gradient-id');
}
なぜだかわかりません。多分それは私のスタイルシートを含むディレクトリ構造と関係があるのでしょうか?
以下のコードにcss(外部と内部の両方のcss)を割り当てると、SVGの「fill:url(#…)」がFirefoxで異常な動作をします。
#myselector {
fill: url('#gradient-id');
}
ソリューション
インラインスタイリングを提供します。これは両方の方法で行うことができます。静的または動的な方法
ダイナミックな方法
.attr('fill', 'url(#gradient-id)')
静的な方法
fill="url(#gradient-id)"
Staticでは、これをSVG HTMLに配置する必要があります。
私はSVGのlinearGradient
で同じ問題を抱えていました–まだ2017年です。問題は、Firefoxがurl('#gradient-id')
を通常のURLのように扱い、<base href=""/>
メタタグのルールを適用することです。コメントアウトしてからチェックしてください。