एसवीजी क्वेरी-स्ट्रिंग पैरामीटर को समझना

Question

मैंने एक एसवीजी फ़ाइल बनाई है जिसे मैं सीएसएस में पृष्ठभूमि छवि के रूप में उपयोग करना चाहता हूं। मैं रंग भरने इतना की तरह, एक प्रश्न-स्ट्रिंग पैरामीटर का उपयोग कर एसवीजी में परिवर्तित करने के लिए सक्षम होना चाहते हैं:

#rect  { background-image: url('rect.svg'); } 
#rect.red { background-image: url('rect.svg?color=red'); } 

मैं समझता हूँ के रूप में, एसवीजी में एक स्क्रिप्ट टैग का उपयोग कर, मैं color पैरामीटर प्राप्त करने में सक्षम हूँ और भरने के रंग को अद्यतन करें। यहाँ एक उदाहरण एसवीजी है:

<!DOCTYPE svg PUBLIC "-//W3C//DDTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <rect width="100%" height="100%" /> 

    <script> 
    <![CDATA[ 
     var params = { }; 
     location.href.split('?')[1].split('&').forEach(
      function(i) 
      { 
       params[ i.split('=')[0] ] = i.split('=')[1]; 
      } 
     ); 

     if(params.color) 
     { 
      var rect = document.getElementsByTagName("rect")[0]; 
      rect.setAttribute("fill", params.color); 
     } 
    ]]> 
    </script> 
</svg> 

सीधे फाइल करने के लिए जा रहे हैं, या किसी वस्तु टैग काम करने के लिए लगता है का उपयोग करते हुए, लेकिन सीएसएस पृष्ठभूमि छवियों या img टैग के लिए, रंग पैरामीटर नजरअंदाज कर दिया है।

मुझे बिल्कुल यकीन नहीं है कि यहां क्या हो रहा है, और मैं उम्मीद कर रहा था कि मैं जो पूरा करने की कोशिश कर रहा हूं उसके लिए एक स्पष्टीकरण या वैकल्पिक समाधान होगा (अधिमानतः सर्वर-साइड प्रसंस्करण का उपयोग किए बिना)।

यहाँ एक jsFiddle विभिन्न तरीकों प्रस्तुत करना दिखा है: http://jsfiddle.net/ehb7S/

Answer 1

मैंने एक सर्वर-साइड समाधान बनाया है जो मुझे एसवीजी फ़ाइल में रंग भरने की अनुमति देता है। अनिवार्य रूप से, मैं एक PHP फ़ाइल है कि उन पर निम्नलिखित करता है करने के लिए सभी एसवीजी अनुरोध अनुप्रेषित:

$filename = $_SERVER['SCRIPT_FILENAME']; 

$svg = simplexml_load_file($filename); 
if(isset($_GET['color'])) 
{ 
    $svg->path->addAttribute('fill', '#' . $_GET['color']); 
} 

header("Content-type: image/svg+xml"); 
echo $svg->asXML(); 

जाहिर है, यह है कि तुलना में यह करने के लिए एक छोटे से अधिक, से निपटने कैशिंग और इस तरह के साथ क्या है, लेकिन यह मांस-n- है आलू। शायद यह जांचना चाहें कि fill विशेषता पहले से मौजूद है या नहीं।

Answer 2

आप एक इनलाइन एसवीजी कि छिपा हुआ है का उपयोग कर सकते है कि बदल सकते हैं और गतिशील रूप से एक डेटा यूआरएल है कि आप background-image संपत्ति में डाल के रूप में यह सांकेतिक शब्दों में बदलना। आपका HTML देखो की तरह कर सकते हैं:

<div id="backgroundContainer" style="display:none"> 
    <svg width="100px" height="100px" id="backgroundSvg" xmlns="http://www.w3.org/2000/svg"> 
     <circle cx="50" cy="50" r="50" fill="green"/> 
    </svg> 
</div> 

<div id="divWithBackground" onclick="changeBackground(event)"> 
    Click to change background SVG to random color 
</div> 

और अपने जावास्क्रिप्ट

तरह

changeBackground = function(event) { 
    var backgroundSvg = document.getElementById("backgroundSvg"); 
    var backgroundContainer = document.getElementById("backgroundContainer"); 
    backgroundSvg.getElementsByTagName("circle")[0].setAttribute(
    "fill", 
    ["red","green","blue","black"][Math.floor(4*Math.random())] 
); 
    event.target.setAttribute(
    "style", 
    "background-image:url(data:image/svg+xml," 
    + encodeURI(backgroundContainer.innerHTML) 
    + ")" 
); 
} 

proof of concept on jsFiddle देखें।