SVG come immagine di sfondo in linea di un Div non funziona

Ho una finestra di dialogo basata su Jquery complessa e voglio fornire un'immagine SVG come sfondo. Ho provato a farlo funzionare prima in un semplice file di test e non funziona sebbene SVG, come immagine standalone, funzioni bene. Ecco il codice semplificato:SVG come immagine di sfondo in linea di un Div non funziona

<script> 
$(document).ready(function() { 
    svg = "<svg width='400' height='400' fill='url(#grad1)' \ 
    xmlns='http://www.w3.org/2000/svg'> <rect id='bkgrect' width='400' \ 
    height='400' style='fill:'url(#grad1)'; stroke-width:3;'/> <defs>\ 
    <linearGradient id='grad1' x1='0' y1='20%' x2='0%' y2='100%'> \ 
    <stop id='stop1' offset='0%' stop-color='blue'/> <stop offset='100%' \ 
    stop-color='white'/> </linearGradient> </defs> </svg>"; 
    svgBase64 = btoa(svg); 
    bkgrndImg = "url('data:image/svg+xml;base64,"+ svgBase64 +"')"; 
    $('#testDiv').css('background-image', bkgrndImg); 
}); 
</script> 
</head> 
<body> 
    <div id='testDiv' style="border:2px solid red;width:400px;height:400px; 
    position:absolute;left:100px;top:100px;"> Some SVG Div </div> 
    <svg ... /svg>

Lo svg .../svg è lo stesso SVG come usato in background e viene visualizzato correttamente.

Dopo aver esaminato varie soluzioni, mi sono basato principalmente sul post this. Ho anche provato a simulare l'immagine SVG di sfondo usando z-index e posizionando l'immagine in Div come un'immagine ma questa non è una buona soluzione. Voglio ottenere SVG come immagine di sfondo per funzionare senza intoppi tra i browser perché almeno i gradienti SVG sono ben supportati in tutti i browser moderni e penso che il tempo per il potenziale SVG per essere pienamente realizzato è finalmente arrivato.

fonte

2016-01-05 Sam

Devi averlo come base64? Non potresti semplicemente collegare esternamente allo svg come un'immagine normale? 'background: url (../ images/fancy.svg)' Se lo svg non è dinamico, trovo più facile mantenere un normale file. – Lex

@Lex Voglio averlo in linea così posso cambiarlo in modo dinamico con JS. – Sam

il post che hai citato sta chiedendo di fuggire # che non hai fatto come vedo # sostituito con% 23. – uzma

Ecco un'alternativa. Potresti usare le classi CSS quindi nel tuo Javascript basta cambiare classe per passare da uno sfondo all'altro. Vedere il seguente esempio:

$('button').click(function() { 
 
    $('#testDiv').toggleClass('gradient1 gradient2'); 
 
});

.gradient1 { 
 
    background: #4e8ef7 url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMjk2YWQ0IiAvPgogICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM0ZThlZjciIC8+CiAgPC9saW5lYXJHcmFkaWVudD4KIDwvZGVmcz4KIDxnPgogIDxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBzdHJva2Utd2lkdGg9IjAiIHg9IjAiIHk9IjAiIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiAvPgogPC9nPgo8L3N2Zz4KICAgIA==) top repeat-x; 
 
    background-size: contain; 
 
    } 
 
    .gradient2 { 
 
    background: #7962ff url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjM2ZiYWUyIiAvPgogICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM3OTYyZmYiIC8+CiAgPC9saW5lYXJHcmFkaWVudD4KIDwvZGVmcz4KIDxnPgogIDxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBzdHJva2Utd2lkdGg9IjAiIHg9IjAiIHk9IjAiIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiAvPgogPC9nPgo8L3N2Zz4KICAgIA==) top repeat-x; 
 
    background-size: contain; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Change gradient</button> 
 

 
<div class="gradient1" id='testDiv' style="border:2px solid red;width:400px;height:400px; 
 
    position:absolute;left:100px;top:100px;">Some SVG Div</div>

$('button').click(function() { 
 
    var mySVG = "<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='#EEE'/><stop offset='90%' stop-color='#fcc'/> </linearGradient><rect fill='url(#gradient)' x='0' y='0' width='100%' height='100%'/></svg>"; 
 
    var mySVG64 = window.btoa(mySVG); 
 
    document.getElementById('testDiv').style.backgroundImage = "url('data:image/svg+xml;base64," + mySVG64 + "')"; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Change gradient</button> 
 

 
<div class="gradient1" id='testDiv' style="border:2px solid red;width:400px;height:400px; 
 
    position:absolute;left:100px;top:100px;">Some SVG Div</div>

EDIT Aggiunto PO sfumatura di colore.

Il problema è che con la sintassi:

Change style='fill:'url(#grad1)'; stroke-width:3;'-style='fill:url(#grad1);stroke-width:3;' - rimuovere il ' intorno al url() e dovrebbe funzionare

$(document).ready(function() { 
 

 

 
    var mySVG = "<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' fill='url(#grad1)'><rect id='bkgrect' width='400' height='400' style='fill:url(#grad1);stroke-width:3;' /><linearGradient id='grad1' x1='0' y1='20%' x2='0%' y2='100%'><stop offset='0%' stop-color='blue'/><stop offset='100%' stop-color='white'/> </linearGradient><rect fill='url(#grad1)' x='0' y='0' width='100%' height='100%'/></svg>"; 
 

 

 
    var mySVG64 = window.btoa(mySVG); 
 
    document.getElementById('testDiv').style.backgroundImage = "url('data:image/svg+xml;base64," + mySVG64 + "')"; 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='testDiv' style="border:2px solid red;width:400px;height:400px; 
 
    position:absolute;left:100px;top:100px;">Some SVG Div</div>

Read more here about styling properties

fonte

2016-01-05 14:23:50

questa è più o meno la risposta che è accettata nel [post] (http://stackoverflow.com/questions/10768451/inline-svg-in-css) a cui ho fatto riferimento, anche se hai aggiunto un po 'di Jquery. Il mio problema è che funziona con l'immagine SVG lì, che è quella usata anche da te, ma non con il mio SVG. Mi piacerebbe sapere perché non funziona con il mio SVG, che SVG funziona bene, stand-alone ma non come sfondo. Sto svalutando la risposta perché hai sicuramente fatto qualche sforzo ... Grazie – Sam

@ Sam ho aggiornato la mia risposta. Il problema è con la tua sintassi JavaScript. –

Anche se ho accettato la risposta di cui sopra perché ha identificato l'errore di battitura che non ha funzionato sul mio SVG, la mia soluzione a questo problema è più generica. Quando si tenta di applicare SVG come sfondo, è necessario ridimensionare il gradiente di sfondo. Le opzioni spreadMethod non aiutano. Ho creato una semplice funzione che prende l'ID DIV e i parametri del gradiente per farlo. Quindi recupera la larghezza/altezza del DIV, crea SVG e lo applica allo sfondoImmagine css. Questo è al 100% a prova completa rispetto al ridimensionamento dello sfondo. La "S" in SVG non si applica a tutte le situazioni. – Sam

Si potrebbe provare a non utilizzare la codifica Base64, come descritto qui:

https://css-tricks.com/probably-dont-base64-svg/

.bg { 
    background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>'); 
}

Tuttavia, se si desidera solo il gradiente, si potrebbe utilizzare il CSS background-image: attuatori elettromagnetici sintassi sfumatura (blu, bianca).

fonte

2016-01-05 13:51:40 KWeiss

È la risposta accettata nel post che mi ha riferito. L'ho provato ma non funziona. È un post piuttosto vecchio. Parla anche del contenuto SVG per essere sfuggito agli URL. Daremo un'occhiata più da vicino al riferimento fornito da voi. – Sam

Ho provato di nuovo con e senza il contenuto SVG per essere sfuggito all'URL. Ho trovato che l'esempio fornito per una risposta simile accettata nel post di riferimento da me funziona ma non riesce per il mio SVG. – Sam

è corretto affermare che le sfumature SVG pure (senza librerie come Rafael) sono più supportate dal browser, quindi CSS background-image, linear-gradient? – Sam

E doesn' lavoro perché ti manca xmlns:xlink="http://www.w3.org/1999/xlink" sull'elemento radice <svg>.

Ho provato a eseguire il mio come file autonomo .svg e ho ricevuto l'errore Namespace prefix xlink for href on ... is not defined, che mi ha portato a this question.

fonte

2017-10-04 10:45:50 Nadroev

SVG come immagine di sfondo in linea di un Div non funziona

risposta

Problemi correlati