SVGクエリ文字列パラメータを理解する

Question

CSSで背景画像として使用するSVGファイルを作成しました。私はそうのように、クエリ文字列パラメータを使用してSVGで塗りつぶしの色を変更できるようにしたい：

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

私は理解しているように、SVG内のスクリプトタグを使用して、私はcolorパラメータを取得することができています塗りつぶしの色を更新します。ここでは例の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> 

が直接ファイルに行く、またはオブジェクトタグを使用しては動作するようですが、CSSの背景画像やIMGタグのために、色パラメータは無視されます。

私はここで何が起こっているのか正確にはわかりません。私が達成しようとしていることについての説明や代替解決策があることを望んでいました（できればサーバー側の処理に頼らず）。

はここjsFiddleは異なるレンダリング方法を示すです： http://jsfiddle.net/ehb7S/

Answer 1

私は、SVGファイルに色の塗りつぶしを挿入できるサーバー側のソリューションを作成しました。どのような取り扱いのキャッシングや、と、それよりもそれにもう少しがあります、明らかに

$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-だ：基本的に、私は彼らに次のことを行いPHPファイルへのすべてのSVG要求をリダイレクトポテト。 fill属性がすでに存在するかどうかを確認することもできます。

Answer 2

あなたは、それを変更隠されているインラインSVGを使用して動的にあなたがbackground-imageプロパティに入れたデータURLとしてエンコードすることができます。あなたの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) 
    + ")" 
); 
} 

ようなあなたのJavaScriptがproof of concept on jsFiddleを参照してください。