SVG-Parameter für Abfragezeichenfolgen verstehen

Question

Ich habe eine SVG-Datei erstellt, die ich als Hintergrundbild in CSS verwenden möchte. Ich möchte in der Lage, die Füllfarbe in der SVG zu ändern, um eine Abfrage-String-Parameter verwenden, etwa so:

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

Wie ich verstehe, ein Skript-Tag in der SVG, ich bin in der Lage, die color Parameter zu erhalten und aktualisiere die Füllfarbe. Hier ist ein Beispiel SVG:

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

geht in die Datei direkt, oder über einen Objekt-Tag scheint zu funktionieren, aber für CSS Hintergrundbilder oder img-Tags wird der Farbparameter ignoriert.

Ich bin nicht genau sicher, was hier vor sich geht, und ich hatte gehofft, dass es eine Erklärung oder eine alternative Lösung zu dem geben würde, was ich versuche zu erreichen (vorzugsweise ohne serverseitige Verarbeitung). Hier

ist ein jsFiddle die verschiedenen Render-Methoden zeigt: http://jsfiddle.net/ehb7S/

Answer 1

Ich habe am Ende eine serverseitige Lösung erstellt, die es mir ermöglicht, die Farbfüllung in die SVG-Datei zu injizieren. Im Wesentlichen leite ich alle SVG-Anforderungen an eine PHP-Datei, die auf ihnen folgendes tut:

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

Offensichtlich ist es ein wenig mehr zu bieten als das, was mit der Handhabung Caching und so, aber das ist die Fleisch-n- Kartoffeln. Möchte überprüfen, ob das Attribut fill bereits existiert.

Answer 2

Sie können eine Inline-SVG verwenden, die versteckt ist, das ändern und dynamisch kodieren sie als Daten URL, die Sie in die background-image Eigenschaft setzen. Ihre HTML könnte wie folgt aussehen:

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

und sie JavaScript wie

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) 
    + ")" 
); 
} 

die proof of concept on jsFiddle See.