22

私は次の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>'

fillCSSを使用して要素の属性を設定textし、ホバー状態に応じてさまざまなグラデーションを切り替えます。これはChromeとSafariでうまく機能しますが、Firefoxではテキストが表示されません。要素を調べたところ、FirefoxがCSS属性noneの最後に追加されていることがわかりました。fill: url(#...)Firebugでキーワードを削除しようとしましnoneたが、Firebugは属性全体を削除するだけです。なぜこうなった？

編集：fillプロパティを設定するCSSを削除し、fill属性をtext要素にハードコードすると（インラインstyle属性を介さずに）、テキストがすべてのブラウザーで正しく表示されること に注意してください。

4

3 に答える 3

39

理解した。私の CSS では、もともとインラインで塗りつぶしを参照していたのと同じ方法でグラデーションを参照していました。

#myselector {
    fill: url('#gradient-id');
}

Firefox で動作させるには、次のように変更する必要がありました。

#myselector {
    fill: url('/#gradient-id');
}

これがなぜなのかわかりません。私のスタイルシートを含むディレクトリ構造と何か関係があるのでしょうか?

于 2013-02-28T14:48:24.150 に答える
7

SVG の「fill: url(#…)」は、以下のコードを css (外部および内部 css の両方) で割り当てると、Firefox で奇妙な動作をします。

#myselector {
fill: url('#gradient-id');
}

解決

インライン スタイルを指定します。これは両方の方法で行うことができます。静的または動的な方法

動的な方法

.attr('fill', 'url(#gradient-id)')

静的な方法

fill="url(#gradient-id)"

静的では、これを SVG Html に入れる必要があります。

于 2014-03-28T16:13:16.337 に答える