Hiểu thông số chuỗi truy vấn SVG

Question

Tôi đã tạo tệp SVG mà tôi định sử dụng làm hình nền trong CSS. Tôi muốn để có thể thay đổi màu sắc lấp trong SVG sử dụng một tham số truy vấn-string, như vậy:

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

Theo tôi được biết, sử dụng một thẻ script trong SVG, tôi có thể nhận được các thông số color và cập nhật màu tô. Dưới đây là ví dụ về 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> 

Chuyển đến tệp trực tiếp hoặc sử dụng thẻ đối tượng có vẻ hoạt động, nhưng đối với hình nền CSS hoặc thẻ img, tham số màu bị bỏ qua.

Tôi không chắc chắn những gì đang diễn ra ở đây và tôi hy vọng rằng sẽ có giải thích hoặc giải pháp thay thế cho những gì tôi đang cố gắng hoàn thành (tốt nhất là không cần xử lý phía máy chủ).

Đây là một jsFiddle cho thấy phương pháp làm khác nhau: http://jsfiddle.net/ehb7S/

Answer 1

Tôi đã tạo giải pháp phía máy chủ cho phép tôi chèn màu tô vào tệp SVG. Về cơ bản, tôi chuyển hướng tất cả các yêu cầu SVG vào một tập tin PHP nào sau đây về họ:

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

Rõ ràng, có nhiều hơn một chút để nó hơn thế, những gì với xử lý bộ nhớ đệm và như vậy, nhưng đó là thịt-n Những quả khoai tây. Có thể muốn kiểm tra xem thuộc tính fill đã tồn tại chưa.

Answer 2

Bạn có thể sử dụng tập tin SVG lên inline đó là ẩn, thay đổi điều đó và tự động mã hóa nó như là một URL dữ liệu mà bạn đưa vào background-image tài sản. HTML của bạn có thể trông giống như:

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

và JavaScript của bạn như

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

Xem proof of concept on jsFiddle.