web-dev-qa-db-ja.com

SVGの「fill：url（＃....）」がFirefoxで異常な動作をする

次の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属性を介して）、テキストはすべてのブラウザーで適切に表示されます。

cssfirefoxsvggradientfill
21
Nathan Friend

理解した。私のCSSでは、最初にインラインでfillを参照していたのと同じ方法でグラデーションを参照していました。

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

Firefoxで機能させるには、次のように変更する必要があります。

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

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

39
Nathan Friend

以下のコードにcss（外部と内部の両方のcss）を割り当てると、SVGの「fill：url（＃…）」がFirefoxで異常な動作をします。

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

ソリューション

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

ダイナミックな方法

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

静的な方法

fill="url(#gradient-id)"

Staticでは、これをSVG HTMLに配置する必要があります。

7
Shailender Singh

私はSVGのlinearGradientで同じ問題を抱えていました–まだ2017年です。問題は、Firefoxがurl('#gradient-id')を通常のURLのように扱い、<base href=""/>メタタグのルールを適用することです。コメントアウトしてからチェックしてください。

1
lukdur