Ustawianie obrazu tła css na wbudowany symbol SVG?

wiem zewnętrzne SVG może być związana z obrazów tła:Ustawianie obrazu tła css na wbudowany symbol SVG?

background-image: url(Icon.svg);

i symbole identyfikacyjne mogą być kierowane z zewnętrznego pliku SVG:

background-image: url(Icons.svg#Icon-Menu);

ale jak mogę ustawić obraz tła do inline symbol svg? * (jak poniżej) *

Mój svg znajduje się na górze mojej treści strony, a nie w pliku zewnętrznym.

Chcę, aby obraz tła .test był symbolem #Icon-Menu.

.test{ 
 
    background:#ddd url('../#Icon-Menu'); 
 
    height:100px; 
 
    width:100px; 
 
    display:block; 
 
}

<div style="height: 0; width: 0; position: absolute; visibility: hidden;"> 
 
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <symbol id="Icon-Menu" viewBox="0 0 512 512"> 
 
     <title>Menu</title> 
 
     <path d="M93.417,5.333H6.583c-1.654,0-3,1.346-3,3v13.334c0,1.654,1.346,3,3,3h86.833c1.654,0,3-1.346,3-3V8.333 \t C96.417,6.679,95.071,5.333,93.417,5.333z" /> 
 
     <path d="M93.417,40.333H6.583c-1.654,0-3,1.346-3,3v13.334c0,1.654,1.346,3,3,3h86.833c1.654,0,3-1.346,3-3V43.333 \t C96.417,41.679,95.071,40.333,93.417,40.333z" /> 
 
     <path d="M93.417,75.333H6.583c-1.654,0-3,1.346-3,3v13.334c0,1.654,1.346,3,3,3h86.833c1.654,0,3-1.346,3-3V78.333 \t C96.417,76.679,95.071,75.333,93.417,75.333z" /> 
 
    </symbol> 
 
    </svg> 
 
</div> 
 

 
<div class="test"></div>

Źródło

2015-02-12 Obsidian

Nie sądzę, można to zrobić (przynajmniej w sposób próbujesz) i nie jestem pewien, dlaczego ** **, co chcesz. –

@Paulie_D Nie byłem pewien, czy tak było, czy nie. Wiem, że svg może być użyty jako tło. Byłem po prostu ciekawy, ponieważ zaoszczędziłoby to sporo znaczników HTML, gdybym mógł zrobić to wszystko w css – Obsidian

Obraz musi być kompletnym plikiem. –

Obraz musi być kompletny plik.

Z SVG specification ...

'Image' elementu wskazuje, że zawartość pełnej dokumentacji mają być renderowane ...

To samo odnosi się do t-image itd.

Źródło

2015-02-12 14:05:35

nie. https: // stackoverflow.com/questions/10768451/inline-svg-in-css –

@Robert Longson

to prawda. Ale możesz to zrobić w ten sposób. Ale symbol nie jest taki, jak będzie działał. Niestety powinieneś użyć "g" lub czegoś podobnego do odniesienia.

body { 
    background: url(http://www.broken-links.com/tests/images/faces.svg#devil-view); 
}

http://codepen.io/Type-Style/pen/ByvKJq

To nie będzie działać, jeśli SVG jest w Markup.

Źródło

2015-03-19 12:46:00

kod pisaka nie działa, https://codepen.io/anon/pen/jmdYvq – zxxc

załączony kodek nie działa –

(1) jeden możliwy sposób z inline SVG byłoby używać symboli i div absolutnego uwarstwienie:

<a class="preview-modal__device-icon-link" ng-click="setPreviewWidth('phone')"> 
    <svg class="preview-modal__device-icon"><use xlink:href="#icon-phone"> 
    </use></svg> 
</a>

(2) Drugim rozwiązaniem byłoby używać danych URI: istnieje dobry Informacje tutaj: https://css-tricks.com/using-svg/ użyciu tego narzędzia: Mobilefish.com online conversion tool

CSS:

.logo { 
    background: url("data:image/svg+xml;base64,[data]"); 
}

HTML:

<img src="data:image/svg+xml;base64,[data]">

Źródło

2016-01-24 23:17:59 Stxle

a css tło z base64 z wbudowanego svg z href do lokalnego symbolu nie działa – blackmamba

Ustawianie obrazu tła css na wbudowany symbol SVG?

Odpowiedz

Powiązane problemy