Пояснение параметров строки запроса SVG

Я создал файл SVG, который я намерен использовать в качестве фонового изображения в 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/

источник

2013-04-12 Quantastical

javascript отключен, когда SVG используется либо как фоновое изображение CSS, либо в теге изображения. –

Ах, это объясняет, почему это не работает. Я оставлю это открытым, если есть какие-то другие умные решения для передачи параметров SVG через CSS, но похоже, что мне может быть не повезло. – Quantastical

Почему бы не использовать некоторые js вне svg? – mihai

В результате я создал серверное решение, которое позволяет мне вводить заливку цвета в файл SVG. По существу, я перенаправлять все запросы 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();

Очевидно, что немного больше, чем то, что с кэшированием обработки и такие, но это мясо-н- картофель. Возможно, вы хотите проверить, существует ли уже атрибут fill.

источник

2014-04-07 15:47:53 Quantastical

Вы можете использовать встроенный SVG, что скрыто, изменить это и динамически кодировать его в качестве URL данных, которые вы положили в background-image собственность. Ваш 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

ответ

Смежные вопросы