Javascript - Изменение SVG Viewbox с Modernizr медиазапросами

Question

я пытаюсь изменить значение в SVG ViewBox С помощью JavaScript и Modernizr запросов СМИ. однако это не работает. Что я делаю не так?

<script type="text/javascript"> 
     var svgRoot = document.getElementById('svg1'); 
     var vbValue = '0 0 10 10'; 

      if (Modernizr.mq('(max-width: 700px)')) { 
      svgRoot.setAttribute('viewBox', vbValue); 

      } 

      else { 
      } 




</script> 

Answer 1

Есть довольно много изменений, которые необходимо сделать для того, чтобы получить эту работу, изменения, необходимые в вашем HTML, SVG файлов и Javascript кодекса,

HTML:

Ваше изображение SVG должно быть внутри объекта Теги с идентификатором.

Например позволяет сказать, что ваш идентификатор "привет"

<object id="hello" data="../images/svg1" type="image/svg+xml" > 

(я предполагаю, что SVG1 это имя файла SVG).

Javascript:

window.onload = function() { 
$(window).on('resize', function(){ 

var a = document.getElementById("hello"); // get the element by the object tag id, not the name of the SVG file 


var svgDoc = a.contentDocument; 

var svgItem = svgDoc.getElementsByTagName("svg")[0]; //copy these exactly, don't change ("svg")[0]; 

if (Modernizr.mq("screen and (max-width:700px)")) { // change the width to whatever you require - must be written in this format though "screen and (max-width:)")) 

svgItem.setAttribute("viewBox", "466.3 0 336.6 232.9"); //change the view box to what you require 

} 
else { 
    svgItem.setAttribute("viewBox", "0 0 1269.2 232.9"); //change the  view box to what you require 
} 
}); 
}; 

SVG файла:

http://plnkr.co/edit/vV8RUt?p=preview

Скопируйте и вставьте весь код в файле svg.svg (от верхней части файла вниз пока вы не дойдете до элементов SVG) в верхнюю часть вашего файла svg. Вам нужно добавить теги скриптов вверху или, по крайней мере, я сделал, так что здесь есть игра.