Svg-Datenbild als CSS-Hintergrund?

Wie Svg Daten Bild als div Hintergrund in CSS zu machen? Wenn in html <img src="data:image/svg+xml;base64,[data]"> es funktioniert gut, aber als CSS Hintergrund wird es nicht angezeigt. Ich habe eine Probe auf Code-Stift erstellt, so dass Sie sehen können. Also habe ich dieses Problem untersucht und festgestellt, dass einige andere Svg-Daten Bilder gut funktionieren.Svg-Datenbild als CSS-Hintergrund?

.frame__wrapper { 
background: transparent url('data:image/svg+xml;base64,[data]') center top no-repeat; 
background-size: 100% auto; 
width: 310px; 
height: 272px; 
margin: 0 auto; 
padding: 26px 10px; 
}

codepen working sample with svg image Ich kann hier nicht codiert svg einfügen.

Mit Daten URI von diesem Tuttorial svg data uris konnte ich css backgkround setzen. Also base64 wird noch nicht angezeigt.

Quelle

2016-12-31 Igors Maslakovs

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

Danke, aber wie SVG-Code ist es nicht entweder Daten arbeiten: image/svg + xml; utf8 , –

Ich sah diesen Beitrag und dort funktioniert es gut, was ist ein Unterschied? http://codepen.io/anon/pen/rpfEz –

Meine Schritte auf, wie SVG-Datenbild als Hintergrund in CSS verwenden:

1) codierten I ein Bild als base64

2) I dieses codierte Bild in SVG Auszeichnungs

eingebettet

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="your width" height="your height" viewBox="0 0 your width your height"> <image xlink:href="data:image/jpeg;base64,[data]" x="0" y="0" height="100%" width="100%"/> </svg>

3) Dann habe ich uri-encoded all dieses Zeug hier SVG encoder

4) Schließlich Ich legte das Ergebnis in meine Hintergrund-Eigenschaft mit data:image/svg+xml;charset=utf-8,[data]

In meinem Fall brauchte ich einen Filter auf das Hintergrundbild angewendet werden, aber wenn Sie es nicht brauchen, ist es in Ordnung :) Auch es funktioniert nicht in IE. Hoffe, diese Info hilft.

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%20100%20100%22%3E%0A%20%20%3Cimage%20xlink%3Ahref%3D%22data%3Aimage/jpeg%3Bbase64%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%22%20x%3D%220%22%20y%3D%220%22%20height%3D%22100%25%22%20width%3D%22100%25%22/%3E%0A%3C/svg%3E); 
 
}

<div></div>

Quelle

2016-12-31 10:31:35 curveball

FYI, alle diese verknüpften SVG-Encoder tut die Zeichenfolge durch JavaScript 'escape()' -Funktion, so dass Sie es in Ihrer Browser-Konsole replizieren können ('Strg' +' Shift' + 'K' in Firefox, 'Ctrl' +' Shift' + 'J' in Chrome) indem Sie einfach' escape (\ ' \') '' ausführen. Beachten Sie auch, dass es nicht funktioniert (auf Firefox 56 oder 57+), wenn Sie Fragezeichen haben, wie die in '', aber Firefox klagen nicht über das Fehlen dieses Lead-Tags. –

Svg-Datenbild als CSS-Hintergrund?

Antwort

Verwandte Themen