瞭解SVG查詢字符串參數

我創建了一個我打算用作CSS背景圖像的SVG文件。我希望能夠使用查詢字符串參數更改填充顏色在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/

來源

2013-04-12 Quantastical

當SVG被用作CSS背景圖像或圖像標籤時，javascript被禁用。 –

啊，這解釋了爲什麼它不起作用。如果有任何其他聰明的解決方案通過CSS將參數傳遞給SVG，我將保持開放狀態，但看起來我可能不太會運氣。 – Quantastical

爲什麼不在svg之外使用一些js？ – mihai

我最終創建了一個服務器端解決方案，允許我將顏色填充注入到SVG文件中。從本質上講，我重定向所有SVG請求，做對他們下面的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屬性是否已經存在。

來源

2014-04-07 15:47:53 Quantastical

您可以使用內聯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>

和你的JavaScript像

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。

來源

2013-04-13 12:25:14

瞭解SVG查詢字符串參數

回答

相關問題