Il gradiente SVG diventa nero quando c'è un tag BASE nella pagina HTML?

Sto utilizzando la libreria JavaScript di Raphaël per creare elementi SVG in una pagina HTML e utilizzare CodeIgniter come framework PHP. Nel framework CodeIgniter ho bisogno di aggiungere un tag <base> all'inizio del documento HTML per utilizzare JS, CSS e immagini, ma ha causato uno strano problema nell'elemento SVG.Il gradiente SVG diventa nero quando c'è un tag BASE nella pagina HTML?

Quando utilizzo il tag <base>, le sfumature non funzionano. Invece, l'oggetto diventa nero. Si comporta esattamente allo stesso modo degli oggetti percorso riempiti di immagine.

Uno script di gradiente di esempio è here.

fonte

2011-10-13 Ahmet Yildirim

La risposta corretta è qui ... http://stackoverflow.com/questions/19742805/angular-and-svg-filters – danday74

se si utilizza Angular2, soluzione all'indirizzo http://stackoverflow.com/a/34535256/3218806 – maxbellec

E per coloro che utilizzano AngularJS invece: https://github.com/angular/angular.js/issues/8934#issuecomment-265037833 – Nobita

SVG Gradients sono definiti nel documento con un attributo univoco id, e quindi fa riferimento da un altro elemento come un URL . In genere l'URL è solo il frammento identificatore, ad es .:

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

Se si introduce un elemento di <base> con un attributo href, si modifica il significato di tali URL nel documento. Invece di essere calcolati rispetto al documento corrente, vengono calcolati rispetto all'URI separato specificato.

fonte

2011-10-14 03:57:06 Phrogz

c'è qualche soluzione per escludere svg dal tag base –

comunque accetto la tua risposta ma per favore fammi sapere se conosci un modo per prevenire questo problema senza rimuovere il tag base –

@ AhmetYıldırım Puoi provare a usare un URL completo alla tua pagina con il tag SVG, ad es 'Fill = "url (http://mydomain.com/foo/bar.html#gradient)"'. Tuttavia, suggerirei di correggere CodeIgniter per non richiedere un tag ''. Perché dovresti aver bisogno di questo? – Phrogz

tua definizione del gradiente è sempre corrotto Inoltre ci sono a volte problemi con Opera per determinati usi di oggetti sfumati pieno

fonte

2011-10-13 23:37:43 Chasbeen

Si prega di file bug su Opera qui: http://bugs.opera.com/wizard. E per favore includi un testcase o un link a uno. Grazie :) –

vedere anche la seguente segnalazione di errore: https://bugzilla.mozilla.org/show_bug.cgi?id=652991

a quanto pare, la nozione di riferimento (il gradiente di riempimento o un pennarello-end, ho il sospetto, anche) da URL è problematico per le applicazioni in stile AJAX che utilizzano anche la storia .pushState().

fonte

2012-03-17 01:13:31

Ho avuto un problema simile: il gradiente è reso tutto nero in Chrome, ma non avevo nemmeno un tag <base>.

Modifica

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

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

sembrava per risolvere il problema.

Un altro bug non correlato era che Chrome non era in grado di analizzare transform="translate(...)" su <g> elementi, ho dovuto spostarli in singoli <path>-s.

fonte

2016-02-24 22:43:42 Nikita

Il gradiente SVG diventa nero quando c'è un tag BASE nella pagina HTML?

risposta

Problemi correlati