SVG jako obraz w tle w div nie działa

Mam złożone okno dialogowe oparte na Jquery-UI i chcę dostarczyć obraz SVG jako tło. Próbowałem zrobić to najpierw w prostym pliku testowym i nie działa, chociaż SVG, jako samodzielny obraz, działa dobrze. Oto kod uproszczony:SVG jako obraz w tle w div nie działa

<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>

... SVG/SVG SVG jest taka sama jak stosowana w tle i wyświetla prawidłowo.

Po przeanalizowaniu różnych rozwiązań opieram się głównie na poście this. Próbowałem również symulować obraz SVG w tle za pomocą indeksu z-Z i pozycjonowania obrazu w Div jako obrazu, ale to nie jest dobra poprawka. Chcę, aby SVG był obrazem tła, który działałby płynnie w przeglądarkach, ponieważ gradienty SVG są dobrze obsługiwane we wszystkich nowoczesnych przeglądarkach i myślę, że nadszedł czas, by potencjał SVG w pełni się zrealizował.

Źródło

2016-01-05 Sam

Czy musisz mieć go jako base64? Czy możesz nie tylko zewnętrznie linkować do svg jak normalny obraz? 'background: url (../ images/fancy.svg)' Jeśli svg nie jest dynamiczny, łatwiej jest go zachować jako zwykły plik. – Lex

@Lex Chcę go wstawić, więc mogę go dynamicznie zmieniać za pomocą JS. – Sam

post, o którym wspomniałeś, prosi o ucieczkę #, którego nie zrobiłeś, ponieważ widzę # zastąpiony przez% 23. – uzma

Oto alternatywa. Możesz użyć klas CSS, a następnie w JavaScript, wystarczy zmienić klasę, aby przełączać między różnymi środowiskami. Zobacz poniższy przykład:

$('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>

Albo

$('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 Dodane PO gradient kolorów.

Problem jest ze składnią:

Zmień style='fill:'url(#grad1)'; stroke-width:3;' do style='fill:url(#grad1);stroke-width:3;' - zdjąć ' wokół url() i powinno działać

$(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

Źródło

2016-01-05 14:23:50

jest to właściwie odpowiedź, która jest akceptowana w [post] (http://stackoverflow.com/questions/10768451/inline-svg-in-css), do której się odwołuję, mimo że dodałeś do niej jquery. Mój problem polega na tym, że działa tam z obrazem SVG, który jest również używany przez ciebie, ale nie z moim SVG. Chciałbym wiedzieć, dlaczego nie działa z moim SVG, który SVG działa dobrze, samodzielnie, ale nie jako tło. Uaktualniam odpowiedź, ponieważ z pewnością podjęłaś pewne wysiłki ... Dzięki – Sam

@Sam zaktualizowałem moją odpowiedź. Problem dotyczy Twojej składni JavaScript. –

Chociaż zaakceptowałem powyższą odpowiedź, ponieważ zidentyfikowano literówkę, która zawiodła w moim SVG, moje rozwiązanie tego problemu jest bardziej ogólne. Próbując zastosować SVG jako tło, należy skalować gradient tła. Opcje spreadMethod nie pomagają. Zbudowałem prostą funkcję, która przyjmuje ID DIV i parametry gradientu, aby to zrobić. Następnie pobiera szerokość/wysokość DIV, buduje SVG i stosuje go do css backgroundImage. Jest to w 100% pełny dowód w odniesieniu do skalowania tła. "S" w SVG nie ma zastosowania do wszystkich sytuacji. – Sam

Można spróbować nie przy użyciu kodowania base64, jak opisano tutaj:

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

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

Jednakże, jeśli chcesz tylko gradientu, można po prostu użyć CSS background-image: liniowym składnia gradientowa (niebieska, biała).

Źródło

2016-01-05 13:51:40 KWeiss

Jest to zaakceptowana odpowiedź w poście, o której mowa przeze mnie. Próbowałem, ale to nie działa. To raczej stary post. Mówi także o zawartości SVG, która ma ucieczki URL. Przyjrzę się bliżej referencji dostarczonej przez ciebie. – Sam

Próbowałem ponownie z zawartością SVG i bez niej, aby uzyskać ucieczkę adresu URL. Zauważyłem, że przykład podany dla podobnej zaakceptowanej odpowiedzi we wpisie, do którego się odwołuję, działa, ale nie działa dla mojego SVG. – Sam

czy to prawda, że czyste gradienty SVG (bez bibliotek, takich jak Rafael) są bardziej obsługiwane przez przeglądarkę niż obraz tła CSS, liniowy gradient? – Sam

nie robi” t działa ponieważ brakuje elementu xmlns:xlink="http://www.w3.org/1999/xlink" w głównym elemencie <svg>.

Próbowałem uruchomić mój jako samodzielny plik .svg i otrzymałem błąd Namespace prefix xlink for href on ... is not defined, który doprowadził mnie do this question.

Źródło

2017-10-04 10:45:50 Nadroev

SVG jako obraz w tle w div nie działa

Odpowiedz

Powiązane problemy