SVG "füllen: url (# ....)" seltsam verhalten in Firefox

Ich habe folgendes SVG-Grafik:SVG "füllen: url (# ....)" seltsam verhalten in Firefox

<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 habe das fill Attribut des text Element durch CSS und wechseln Sie zwischen den verschiedenen Gradienten abhängig vom Hover-Status. Dies funktioniert hervorragend in Chrome & Safari, aber in Firefox wird der Text nicht angezeigt. Bei der Überprüfung des Elements entdeckte ich, dass Firefox none an das Ende meines CSS-Attributs fill: url(#...) anfügt. Ich habe versucht, das none Schlüsselwort mit Firebug zu löschen, aber Firebug löscht nur das gesamte Attribut. Warum passiert dies?

EDIT: Ich sollte anmerken, dass, wenn ich entfernen Sie die CSS, die die fill Eigenschaft legt und codieren die fill Attribut in das text Element (nicht durch ein Inline-style Attribut), wird der Text richtig angezeigt wird in allen Browsern.

Quelle

2013-02-27 Nathan Friend

Wie sieht Ihr tatsächliches CSS aus, um mit diesem SVG zu gehen? Was die "keine" Sache angeht, ist "fill: url (was auch immer) keine" dasselbe wie "fill: url (was auch immer)"; beide sagen, wenn das Ding an der URL nicht verfügbar ist, gibt es kein Fallback und nichts sollte gemalt werden. –

@BorisZbarsky Danke, ich habe nicht erkannt, dass die "keine" angegeben, was passiert, wenn die erste Ressource nicht gefunden wird. –

Ich habe es herausgefunden. In meinem CSS, ich wurde auf die gleiche Art und Weise auf den Gradienten beziehe ich ursprünglich die Füllung Inline-Referenzierung:

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

es in Firefox arbeiten zu bekommen, musste ich es, dies ä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?

Quelle

2013-02-28 14:48:24

Ein relativer 'url()' in einem Stylesheet ist relativ zum Stylesheet aufgelöst. Wenn sich Ihr Stylesheet und Ihre SVG in verschiedenen Verzeichnissen befinden, haben Sie wahrscheinlich keine Verbindung zum SVG. –

Webkit macht das nicht richtig und ich bin mir ziemlich sicher, dass Boris das vor einiger Zeit an ihren Bugtracker gemeldet hat. –

Hallo Boris, Ich habe auch dieses Problem, ich habe gesehen, Sie kommentieren häufig auf die Firefox-Fehlerberichte, können Sie erklären, warum füllen: url ("# Gradienten-ID") findet nicht, dass Gradienten-ID in das dom, wenn in css angegeben, aber inline? Ich lade keine Svgs external auf meiner Seite ... Ist die Implementierung von Chrome falsch? Dies scheint das erwartete Verhalten zu sein. – Daniel

SVG „fill: url (# ...)“ seltsam in Firefox verhalten, wenn wir den Code unten mit CSS-Zuordnung

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

Lösung

inline geben (sowohl externe als auch interne CSS.) Styling kann dies auf beide Arten erfolgen. Statische oder dynamische Weise

dynamisch

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

Statische Weise

fill="url(#gradient-id)"

In statisch Sie haben dies in dem SVG-Html zu setzen;

Quelle

2014-03-28 16:13:16

Danke. Die andere akzeptierte Antwort scheint nur zu beheben, wenn die Svg von einer Root-URL aus betrachtet wird (oder umgekehrt). – Chase

auch Stil-Attribut funktioniert, wo CSS-Klasse doesnt. zB .. – luky

-1

Ich hatte dasselbe Problem mit linearGradient in SVG - noch im Jahr 2017. Ich denke, das Problem ist, dass Firefox url('#gradient-id') wie normale URL behandeln und angewandten Regeln von <base href=""/> Metatag. Kommentieren Sie es und überprüfen Sie dann.

Quelle

2017-04-20 08:44:45 lukdur

Es gibt kein Basis-Tag in der Frage. Bei dieser Frage geht es darum, eine URL in einem CSS-Stylesheet aufzulösen. Löst es sich gegen das Stylesheet selbst (wie die CSS-Spezifikation sagt) oder das Dokument, das dieses Stylesheet verwendet (wie es Chrome tut). –

Sicher, es ist nicht - ich denke nur, dass dies ein Grund sein könnte, warum es nicht richtig funktioniert. Es ist ein Grund in meinem Fall. Es geht nicht um Stylesheet, sondern um das ** id ** -Tag (hier ** gradient-id **). Aus bestimmten Gründen hat die Verwendung des relativen Pfades ** # gradient-id ** mit ** base ** metatag etwas zerstört und FF kann nirgendwo ** gradient-id ** tag finden. In meinem Fall funktioniert es nicht in HTML (in SVG-Kreisen) und in CSS oder JS mit relativem Pfad. Es funktioniert, wenn ich ** Basis ** -Tag entferne oder absoluten Pfad in js wie ** festlege. Attr ('stroke', "url (" + window.location.href + "# gradient-id)" ** – lukdur

Meta-Tag betrifft auch Safari @lukdur Also, was ist Ihre Lösung für dieses Problem? Einstellung der absoluten Pfad? –

SVG "füllen: url (# ....)" seltsam verhalten in Firefox

Antwort

Verwandte Themen