एसवीजी एक div की इनलाइन पृष्ठभूमि छवि के रूप में काम नहीं कर रहा है

मेरे पास एक जटिल Jquery-UI आधारित संवाद है और मैं पृष्ठभूमि के रूप में एक एसवीजी छवि प्रदान करना चाहता हूं। मैंने इस काम को पहले एक साधारण परीक्षण फ़ाइल में बनाने की कोशिश की और यह काम नहीं करता है, हालांकि एक स्टैंडअलोन छवि के रूप में एसवीजी ठीक काम करता है। यहाँ सरल कोड है:एसवीजी एक div की इनलाइन पृष्ठभूमि छवि के रूप में काम नहीं कर रहा है

<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 के रूप में पृष्ठभूमि में प्रयोग किया जाता है और इसे ठीक से प्रदर्शित करता है।

विभिन्न समाधानों को देखने के बाद, मैंने मुख्य रूप से this पोस्ट पर भरोसा किया है। मैंने जेड-इंडेक्स का उपयोग कर पृष्ठभूमि एसवीजी छवि को अनुकरण करने और एक छवि के रूप में छवि में स्थिति को पोजिशन करने का भी प्रयास किया लेकिन यह एक अच्छा फिक्स नहीं है। मैं एसवीजी को पृष्ठभूमि छवि के रूप में आसानी से काम करने के लिए पृष्ठभूमि छवि के रूप में प्राप्त करना चाहता हूं क्योंकि कम से कम एसवीजी ग्रेडियेंट सभी आधुनिक ब्राउज़रों में अच्छी तरह से समर्थित हैं और मुझे लगता है कि एसवीजी की पूरी तरह से एहसास होने की संभावना आखिरकार आ गई है।

स्रोत

2016-01-05 Sam

क्या आपको इसे बेस 64 के रूप में रखना है? क्या आप केवल सामान्य छवि की तरह svg से लिंक नहीं कर सकते? 'पृष्ठभूमि: url (../ images/fancy.svg) 'यदि svg गतिशील नहीं है तो मुझे सामान्य फ़ाइल के रूप में बनाए रखना आसान लगता है। – Lex

@Lex मैं इसे इनलाइन करना चाहता हूं ताकि मैं इसे जेएस के साथ गतिशील रूप से बदल सकूं। – Sam

आपके द्वारा उल्लिखित पोस्ट से बचने के लिए कहा जा रहा है # जो आपने नहीं देखा # # के साथ प्रतिस्थापित # 23। – uzma

यहां एक विकल्प है। आप अपने जावास्क्रिप्ट में सीएसएस कक्षाओं का उपयोग कर सकते हैं बस अपनी कक्षा को विभिन्न पृष्ठभूमि के बीच टॉगल करने के लिए बदलें।

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

संपादित जोड़ा गया ऑप्स ढाल रंग: नीचे दिए गए उदाहरण देखें। - url() आसपास ' को हटा कर उसे काम करना चाहिए

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

स्रोत

2016-01-05 14:23:50

यह मेरे द्वारा संदर्भित [पोस्ट] (http://stackoverflow.com/questions/10768451/inline-svg-in-css) में स्वीकार किया गया उत्तर है, हालांकि आपने इसमें कुछ jquery जोड़ा है। मेरी समस्या यह है कि यह वहां एसवीजी छवि के साथ काम करता है, जो आपके द्वारा भी उपयोग किया जाता है, लेकिन मेरे एसवीजी के साथ नहीं। मैं जानना चाहता हूं कि यह मेरे एसवीजी के साथ क्यों काम नहीं करता है, जो एसवीजी ठीक काम करता है, स्टैंड-अलोन लेकिन पृष्ठभूमि के रूप में नहीं। मैं जवाब को उखाड़ फेंक रहा हूं क्योंकि आपने निश्चित रूप से कुछ प्रयास किए हैं ... धन्यवाद – Sam

@ सैम मैंने अपना जवाब अपडेट किया। समस्या आपके जावास्क्रिप्ट वाक्यविन्यास के साथ है। –

हालांकि मैंने उपर्युक्त उत्तर स्वीकार कर लिया है क्योंकि यह टाइपो की पहचान करता है जो मेरे एसवीजी में विफल रहा है, इस समस्या का मेरा समाधान अधिक सामान्य है। एसवीजी को पृष्ठभूमि के रूप में लागू करने का प्रयास करते समय, किसी को पृष्ठभूमि ढाल को स्केल करना होता है। SpreadMethod विकल्प मदद नहीं करते हैं। मैंने एक साधारण फ़ंक्शन बनाया जो DIV आईडी और ढाल पैरामीटर को करने के लिए लेता है। इसके बाद यह डीआईवी की चौड़ाई/ऊंचाई प्राप्त करता है, एसवीजी बनाता है और इसे पृष्ठभूमि इमेज सीएसएस पर लागू करता है। पृष्ठभूमि की स्केलिंग के संबंध में यह 100% पूर्ण प्रमाण है। एसवीजी में "एस" सभी स्थितियों पर लागू नहीं होता है। – Sam

आप यहां बताए अनुसार, बेस 64 एन्कोडिंग का उपयोग नहीं की कोशिश कर सकते: रैखिक: अगर आप केवल ढाल चाहते हैं, तो आप सिर्फ सीएसएस पृष्ठभूमि छवि का उपयोग कर सकते

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

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

हालांकि, ढाल (नीला, सफेद) वाक्यविन्यास।

स्रोत

2016-01-05 13:51:40 KWeiss

यह मेरे द्वारा संदर्भित पद में स्वीकार्य उत्तर है। मैंने कोशिश की लेकिन यह काम नहीं करता है। इसकी बजाय पुरानी पोस्ट। यह एसवीजी सामग्री के बारे में भी यूआरएल से बचने के लिए बात करता है। मैं आपके द्वारा प्रदान किए गए संदर्भ पर नजदीकी नजर डालेगा। – Sam

मैंने एसवीजी सामग्री के साथ और बिना यूआरएल से बचने की कोशिश की। मैंने पाया कि मेरे द्वारा संदर्भित पोस्ट में एक समान स्वीकृत उत्तर के लिए प्रदान किया गया उदाहरण काम करता है लेकिन मेरे एसवीजी के लिए विफल रहता है। – Sam

यह कहना सही है कि शुद्ध एसवीजी (राफेल जैसे पुस्तकालयों के बिना) ग्रेडियेंट अधिक ब्राउज़र समर्थित हैं तो सीएसएस पृष्ठभूमि-छवि, रैखिक-ढाल? – Sam

यह नहीं करता है '

बदलें style='fill:'url(#grad1)'; stroke-width:3;'style='fill:url(#grad1);stroke-width:3;' रहे हैं:

समस्या वाक्य रचना के साथ है टी काम नहीं क्योंकि आप रूट <svg> तत्व पर xmlns:xlink="http://www.w3.org/1999/xlink" गुम हैं।

मैंने अपनी स्टैंडअलोन .svg फ़ाइल के रूप में चलाने की कोशिश की और त्रुटि Namespace prefix xlink for href on ... is not defined मिली, जिसने मुझे this question पर ले जाया।

स्रोत

2017-10-04 10:45:50 Nadroev

एसवीजी एक div की इनलाइन पृष्ठभूमि छवि के रूप में काम नहीं कर रहा है

उत्तर

संबंधित मुद्दे