wake-up-neo.net

SVG "fill: url (# ....)" verhält sich merkwürdig in Firefox

Ich habe folgende SVG-Grafik:

<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>'

Ich setze das fill-Attribut des text-Elements über CSS und wechsle je nach Hover-Status zwischen den verschiedenen Gradienten. Das funktioniert in Chrome und Safari hervorragend, aber in Firefox wird der Text nicht angezeigt. Bei der Untersuchung des Elements entdeckte ich, dass Firefox none an das Ende meines fill: url(#...) CSS-Attributs anfügt. Ich habe versucht, das Schlüsselwort none mit Firebug zu löschen, aber Firebug löscht nur das gesamte Attribut. Warum passiert dies?

EDIT: Ich sollte beachten, dass der Text in allen Browsern ordnungsgemäß angezeigt wird, wenn ich das CSS entferne, das die fill -Eigenschaft festlegt und das fill-Attribut in das text-Element (nicht durch ein Inline-Attribut style) festcodiert.

20
Nathan Friend

Herausgefunden. In meinem CSS bezog ich mich auf die Farbverläufe auf dieselbe Weise wie ich ursprünglich auf die Füllinline verwiesen habe:

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

Damit es in Firefox funktioniert, musste ich es folgendermaßen ändern:

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

Nicht sicher, warum das so ist. Vielleicht hat es etwas mit der Verzeichnisstruktur zu tun, die mein Stylesheet enthält?

38
Nathan Friend

SVG "fill: url (# ...)" verhält sich merkwürdig in Firefox, wenn wir den folgenden Code mit css zuweisen (sowohl externe als auch interne css.) 

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

Lösung

inline-Styling geben, dies kann auf beide Arten erfolgen. Statischer oder dynamischer Weg

Dynamischer Weg 

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

Statischer Weg

fill="url(#gradient-id)" 

In statisch müssen Sie dies in die SVG-HTML-Datei einfügen.

7

Ich hatte das gleiche Problem mit linearGradient in SVG - noch 2017. Ich denke, das Problem ist, dass Firefox url('#gradient-id') wie eine normale URL behandelt und die Regeln von <base href=""/> metatag anwendet. Kommentiere es aus und überprüfe es dann.

0
lukdur