Opis parametrów ciągu znaków zapytania SVG

Utworzono plik SVG, który zamierzam użyć jako obrazu tła w CSS. Chcę być w stanie zmienić kolor wypełnienia w SVG za pomocą parametru query string, tak:Opis parametrów ciągu znaków zapytania SVG

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

Jak rozumiem, za pomocą znacznika script w SVG, jestem w stanie uzyskać parametr color i zaktualizuj kolor wypełnienia. Oto przykład 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>

Idąc do pliku bezpośrednio lub za pomocą znacznik obiektu wydaje się działać, ale dla CSS obrazów tła lub tagi img parametr kolor jest ignorowany.

Nie jestem do końca pewien, co się tutaj dzieje, i miałem nadzieję, że pojawi się wyjaśnienie lub alternatywne rozwiązanie tego, co próbuję osiągnąć (najlepiej bez uciekania się do przetwarzania po stronie serwera).

Oto jsFiddle pokazując różne czynią metody: http://jsfiddle.net/ehb7S/

Źródło

2013-04-12 Quantastical

Język javascript jest wyłączony, gdy obraz SVG jest używany jako obraz w tle CSS lub w obrazie. –

Ahh, to wyjaśnia, dlaczego to nie działa. Zostawię to otwarte na wypadek, gdyby istniały inne sprytne rozwiązania przekazywania parametrów do SVG za pośrednictwem CSS, ale wygląda na to, że może mi się to nie udać. – Quantastical

dlaczego nie używać js poza svg? – mihai

Skończyłem na stworzeniu rozwiązania po stronie serwera, które pozwala mi wprowadzić kolorowe wypełnienie do pliku SVG. Zasadniczo I przekierować wszystkie żądania SVG do pliku PHP, który wykonuje następujące operacje na nich:

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

Oczywiście, jest to trochę więcej niż tylko to, co z buforowania obsługi i takie, ale to mięso-n- ziemniaki. Może chcieć sprawdzić, czy atrybut fill już istnieje.

Źródło

2014-04-07 15:47:53 Quantastical

Można użyć SVG inline, który jest ukryty, to zmienić i dynamicznie zakodować go jako adres URL danych, które można umieścić na własność background-image. Twój HTML może wyglądać tak:

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

i JavaScript jak

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

Zobacz proof of concept on jsFiddle.

Źródło

2013-04-13 12:25:14

Opis parametrów ciągu znaków zapytania SVG

Odpowiedz

Powiązane problemy