Bir satırın satır içi arka plan görüntüsü olarak SVG çalışmıyor

Karmaşık bir Jquery-UI tabanlı iletişimim var ve arka plan olarak bir SVG resmi sağlamak istiyorum. Bu çalışmayı önce basit bir sınama dosyasında yapmaya çalıştım ve SVG'nin bağımsız bir görüntü olarak çalışması iyi olmaz. İşte basitleştirilmiş bir koddur:Bir satırın satır içi arka plan görüntüsü olarak SVG çalışmıyor

<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 arka planda kullanılan aynı svg ve düzgün görüntüler.

Çeşitli çözümlere baktıktan sonra, öncelikle this numaralı yayına güvenmiş oldum. Ayrıca z-endeksi kullanarak ve görüntüyü Div olarak bir görüntü olarak konumlandırarak arka plan SVG görüntüsünü simüle etmeye çalıştım ama bu iyi bir düzeltme değil. SVG'nin tarayıcılar arasında sorunsuz bir şekilde çalışabilmesi için bir arka plan görüntüsü olarak almak istiyorum çünkü en azından SVG degradeleri tüm modern tarayıcılarda çok iyi destekleniyor ve SVG'nin tam olarak gerçekleştirilme potansiyelinin zamanı geldi.

kaynak

2016-01-05 Sam

Temel64 olarak sahip olmak zorunda mı? Normal olarak svg'ye normal bir görüntü gibi bağlayamaz mısınız? arka plan: url (../ images/fancy.svg) 'svg dinamik değilse normal bir dosya olarak bakımı daha kolay buluyorum. – Lex

@Lex Satırda olmasını istiyorum, böylece JS ile dinamik olarak değiştirebiliyorum. – Sam

bahsettiğiniz gönderi, # göründüğüm gibi yapmadığınız # kaçını sormak #% 23 ile değiştirildi. – uzma

İşte bir alternatif. CSS sınıflarını daha sonra Javascript'inizde kullanarak, farklı arka planlar arasında geçiş yapmak için sınıfını değiştirebilirsiniz.

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

DÜZENLEME Eklenen OP degrade renk: Bu örneğe bakın. - url() etrafında ' kaldırmak ve bu kokan

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

kaynak

2016-01-05 14:23:50

Bu biraz JQuery eklediniz rağmen, bana göre başvurulan [post] (http://stackoverflow.com/questions/10768451/inline-svg-in-css) kabul edilen bir cevaptır. Benim problemim, orada SVG görüntüsüyle çalışıyor, ki sizin tarafınızdan kullanılan, ama SVG'mde değil. SVG'nin neden iyi çalışmadığı, tek başına değil, arka plan olarak çalıştığım SVG'mle neden çalışmadığını bilmek isterim. Cevabı kaldırıyorum çünkü kesinlikle biraz çaba harcadınız ... Teşekkürler – Sam

@Sam Cevabımı güncelledim. Sorun, JavaScript sözdizimi ile. –

Yukarıdaki cevabı kabul etmeme rağmen, SVG'yi başarısız olan yazım hatası belirlediğinden, bu soruna olan çözümüm daha geneldir. SVG'yi arka plan olarak uygulamaya çalışırken, arka plan gradyanını ölçeklendirmek gerekir. SpreadMethod seçenekleri yardımcı olmuyor. Bunu yapmak için DIV kimliğini ve degrade parametrelerini alan basit bir işlev oluşturdum. Daha sonra DIV'nin genişliğini/yüksekliğini getirir, SVG'yi oluşturur ve backgroundImage css'ye uygular. Bu, arka planın ölçeklendirilmesine göre% 100 tam bir kanıttır. SVG'deki "S", tüm durumlar için geçerli değildir. – Sam

burada açıklandığı gibi, base64 şifrelemesini kullanan yapmayıbırakabilirsen:

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

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

Ancak, yalnızca gradyan istiyorsanız, sadece CSS background-image kullanabilirsiniz: lineer degrade (mavi, beyaz) sözdizimi.

kaynak

2016-01-05 13:51:40 KWeiss

Benim tarafımdan atıfta bulunulan kabul edilen cevaptır. Denedim ama işe yaramıyor. Onun oldukça eski yazı. Ayrıca, URL kaçışının SVG içeriğinden bahseder. Sizin tarafınızdan sağlanan referansa daha yakından bakacağım. – Sam

URL-escaped olmak için SVG içeriği ile ve olmadan tekrar denedim. Benim tarafımdan başvurulan gönderide benzer bir kabul edilen yanıt için verilen örnek çalışmıyorum, ancak SVG'm için başarısız oluyor. – Sam

, saf SVG'nin (Rafael gibi kitaplıklar olmadan) daha tarayıcı destekli olduğunu ve CSS arka plan görüntüsü, doğrusal gradyan olduğunu söyleyebilir miyiz? – Sam

çalışması gerekir

Değişim style='fill:'url(#grad1)'; stroke-width:3;'style='fill:url(#grad1);stroke-width:3;' için:

Sorun sözdizimi ile Çalışmak Çünkü <svg> öğesinde xmlns:xlink="http://www.w3.org/1999/xlink" eksik.

Tek başına bir .svg dosyası olarak çalıştırmayı denedim ve this question adresine yönlendiren Namespace prefix xlink for href on ... is not defined hatasını aldım.

kaynak

2017-10-04 10:45:50 Nadroev

Bir satırın satır içi arka plan görüntüsü olarak SVG çalışmıyor

cevap

İlgili konular