Question

我正在尝试使用javascript和modernizr媒体查询更改svg视图框的值。但是，这不起作用。我做错了什么？

<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图像需要位于具有ID的对象标签内。

例如，假设你的身份证是＆＃34;你好＆＃34;

<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文件的顶部。你必须在顶部添加一些脚本标签，或者至少我做了，所以在这里玩一下。

Javascript - 使用Modernizr媒体查询更改SVG viewBox

1 个答案: