SVG-Verlauf wird schwarz, wenn es ein BASE-tag in HTML-Seite?

Ich bin mit dem Raphaël-JavaScript-Bibliothek zum erstellen von SVG-Elemente in einer HTML-Seite und die Verwendung von CodeIgniter als PHP-framework. In dem CodeIgniter framework-ich muss noch ein <base> - tag im Kopf des HTML-Dokuments zu verwenden, JS,CSS und Bilder, aber es verursacht ein komisches problem in der SVG-element.

Wenn ich den <base> tag, Farbverläufe funktionieren nicht. Stattdessen wird das Objekt schwarz. Es verhält sich genau das gleiche mit Bild gefüllt path-Objekte.

InformationsquelleAutor Ahmet Yildirim | 2011-10-13
  1. 14

    SVG-Farbverläufe im Dokument definiert sind, mit einer einzigartigen id - Attribut, und dann auf die von einem anderen element als eine URL. Typischerweise wird die URL wird nur der fragment identifier, z.B.:

    <defs>
  <linearGradient id="foo" ...>...</linearGradient>
</defs>
<rect fill="url(#foo)" ... />

    Wenn Sie die Einführung einer <base> element mit einem href - Attribut hat, ändern Sie die Bedeutung solcher URLs in das Dokument ein. Statt berechnet relativ zum aktuellen Dokument sein, Sie sind berechnet relativ zum angegebenen separaten URI.

    • gibt es irgendeine Lösung auszuschließen svg von der base-tag
    • trotzdem werde ich akzeptiere Ihre Antwort, aber bitte lassen Sie mich wissen, wenn Sie wissen, einen Weg, um zu verhindern, dass dieses problem ohne entfernen der base-tag
    • Sie könnten versuchen, mit einer vollen URL zu deiner Seite, mit dem SVG-tag, z.B. fill="url(http://mydomain.com/foo/bar.html#gradient)". Jedoch, ich würde vorschlagen, Befestigung CodeIgniter, nicht benötigen, einen <base> tag. Warum würden Sie benötigen diese?
    • Mit der vollständigen URL nicht funktioniert, weil es geht und der die Datei liest, anstatt den (veränderten) Dokument, wie Sie derzeit konstituiert sich in der DOM. Es muss wirklich ein Weg zu sein, zu entwirren SVG aus der HTML - base tag.
    • Wenn durch Zufall Sie sind mit AngularJS, wegen diesem Problem, Sie haben eine option Hinzugefügt, um zu beseitigen die Notwendigkeit für <base>: github.com/angular/angular.js/issues/8934#issuecomment-56568466
    • für Angular2, stackoverflow.com/a/34535256/3218806

    InformationsquelleAutor Phrogz
  2. 4

    siehe auch den folgenden bug-report:
    https://bugzilla.mozilla.org/show_bug.cgi?id=652991

    offenbar, den Begriff der Referenzierung (Füllung Farbverlauf-oder marker-end, vermute ich, auch) durch eine URL zu einem Problem für AJAX-Stil-Anwendungen, die ebenfalls mit Geschichte.pushState().

    InformationsquelleAutor Erik Eidt
  3. 0

    Farbverlauf definition ist immer beschädigt,
    Auch gibt es manchmal Probleme mit Opera, für bestimmte Nutzungen des Gradienten gefüllt Objekte

    • Bitte Datei Fehler in Opera-hier: bugs.opera.com/wizard. Und bitte einen testcase, oder einen link zu einem. Vielen Dank 🙂
    InformationsquelleAutor Chasbeen
  4. -2

    Ich hatte ein ähnliches Problem - gradient gerendert wird, alle schwarz, in Chrom, aber ich hatte noch nicht einmal einen <base> tag.

    Ändern 

    <stop  offset="1" style="stop-color:#F26722"/>

    zu

    <stop  offset="1" stop-color="#F26722"/>

    schien, um das Problem zu beheben.

    Anderen nicht verwandten bug war Chrome nicht in der Lage ist, zu analysieren transform="translate(...)" auf <g> Elemente, die ich hatte, um Sie zu verschieben, in einzelne <path>-s.

    InformationsquelleAutor Nikita
Schreibe einen Kommentar