将SVG与媒体查询一起使用

使用HTML文档，我们可以根据视口的条件显示，隐藏或重新排列页面的某些部分。例如，如果浏览器窗口宽度为480像素，我们可能会将导航从水平导航切换到垂直可折叠列表。我们可以使用媒体查询和SVG文档执行类似的操作。考虑一个徽标，例如下面虚构的Hexagon Web Design＆Development的徽标。

没有媒体查询，此SVG徽标将简单地拉伸或缩小以适合视口或其容器。但是通过媒体查询，我们可以做更多聪明的事情。

让我们区分HTML文档视口和SVG文档视口。当SVG内联时，HTML视口和SVG视口是同一个。SVG文档的行为与任何其他HTML元素相同。在另一方面，当一个SVG文档被链接为与object或img与SVG文档的视口的元件-我们处理。

媒体查询在两种情况下都有效，但是当链接SVG文档时，其视口独立于其HTML文档。在这种情况下，浏览器窗口的大小不会确定SVG视口的大小。取而代之的是，视口尺寸由尺寸确定object，iframe或img元件。以下面的（删节）SVG文档为例：[^ 4]

<svg version="1.1" id="HexagonLogo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 555 174" xml:space="preserve">
    <defs>
        <style type="text/css">
        /* CSS goes here */
        </style>    
    </defs>
    <g id="hex">
        <polygon id="hexagonbg" points="55.2,162 10,86.5 55.2,11 145.5,11 190.7,86.5 145.5,162  "/>
        <path id="letterH" fill="#FFFFFF" d="M58,35.5h33v35.2h18.4V35.5 h33.2v103.4h-33.2v-38.3H91v38.3H58V35.5z M77.5,126.5V87.3h45.6v39.2h4V47.9h-4v35.6H77.5V47.9h-4v78.6H77.5z"/>
    </g>

    <g id="word-mark">
        <g id="hexagon-word">
            ...
        </g>
        <g id="web-design-and-dev">
            ...
        </g>
    </g>
</svg>

在较小的视口中，让我们只显示六边形符号中的H：

@media (max-width: 20em) {
    [id=word-mark] {
        display: none;
    }
}

在较小的视口中，让我们只显示六边形符号中的H：

现在，只要我们的SVG容器小于或等于20em，只有我们徽标的符号部分可见，如下所示。

要从HTML文档触发此视图，请设置SVG容器的宽度：

<object data="hexlogo.svg" type="image/svg+xml" style="width: 20em;"></object>

正如您从上面的图像中看到的那样，我们的SVG图像保留了其内在尺寸，即使其中一部分已被隐藏。不幸的是，这是SVG的限制。要修复它，我们需要更改viewBoxSVG文档的属性，但仅限于视口低于特定大小时。这是一个很好的用例matchMedia。

viewBox顾名思义，该属性决定了SVG元素的可视区域。通过调整它，我们可以确定SVG图像的哪个部分填充视口。以下是使用matchMedia和媒体查询更新viewBox属性的示例：

<script type="text/javascript">
var svg, originalViewBox, max20em, mq, updateViewBox;

svg = document.querySelector('svg');

/* Store the original value in a variable */
originalViewBox = svg.getAttribute('viewBox');

/* Define our media query and media query object */
mq  = matchMedia("(max-width: 20em)");

/* Define the handler */
updateViewBox = function(){
    if (mq.matches) {
        /* Change the viewBox dimensions to show the hexagon */
        svg.setAttribute('viewBox', "0 0 200 174");
    } else {
        svg.setAttribute('viewBox', originalViewBox);
    }
}

/* Fire on document load */
// WebKit/Blink browsers
svg.onload = updateViewBox;

// Firefox & IE
svg.addEventListener('SVGLoad', updateViewBox, true);

/* Fire if the media condition changes */
mq.addListener(updateViewBox);            

</script>

注意：在处理SVGLoad事件时，浏览器有点乱。在我的测试中，addEventListener与Firefox一致。要在Chrome和Safari中获得最佳效果，请使用onloadevent属性。Microsoft Edge也最适用onload，但仅在用作<svg>标记的属性时才有效。换句话说，。<svg onload="updateViewBox">

现在，每当SVG容器为20em或更小时，其值viewBox将为"0 0 200 174"。当它超过时20em，viewBox将恢复到其初始值，如下所示。

注意：有关创建交互式SVG文档的更全面的入门读物，请阅读 W3C的今日浏览器的SVG Primer 的“ 动态SVG和JavaScript ”一章。

由于此技术使用onload事件属性或SVGLoad事件，因此将CSS和JavaScript嵌入SVG文件中是个好主意。当CSS是外部的时，SVGLoad事件可能在其关联的CSS完成加载之前触发。

使用媒体查询 background-size

SVG文档和媒体查询不限于前景图像。我们还可以使用CSS background-size属性调整SVG视口的大小。所有最新的主流浏览器都支持这种技术，但较旧的浏览器版本则不支持。在生产中使用此技术时要小心。

我们将从这个SVG文档开始：

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-20 -20 250 250" xml:space="preserve">
    <style type="text/css">
       circle {
            stroke: #000;
            stroke-width: 30;
            fill: #009688;
       }
       @media (width: 100px) {
            circle {
                fill: #673ab7;
            }
        }
        @media (width: 300px) {
            circle {
                fill: #ffc107;
            }
        }
    </style>
    </defs>
    <circle cx="100" cy="100" r="100" />
    <circle cx="100" cy="100" r="50" />
</svg>

这是一个简单的案例。我们的circle元素将fill在特定视口宽度处获得新颜色。当视口宽度为20像素时，填充将为蓝绿色。当它宽300像素时，它将是黄色。

为了使这项工作，我们必须使用我们的SVG图像作为背景图像并设置选择器的background-size属性。在这种情况下，我们将使用我们的图像作为身体element和li元素的背景。下图显示了结果：

body, li {
    background: url(../images/circles.svg);
}
body {
    background-color: #9c27b0;
    background-size: 300px auto;
}
li {
      background-size: 20px auto;
      background-repeat: no-repeat;
      background-position: left 3px;
      padding-left: 25px;
}