css - 使 SVG 图像响应媒体查询

Question

我在我的网站上使用了一个 SVG 图像。但是，我希望当浏览器宽度小于 292px 时，SVG 图像将调整大小以变小。

这是我的 SVG 上的当前代码。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="25" height="25" viewBox="0 0 141 141">

<defs>

<style type="text/css">

.cls-2 {
    fill: #fff;
}

#smaller {
    height="15";
    width="15";
}


@media screen and (max-width: 292px) {

    #smaller {
        display: block;    
    }

}

</style>




</defs>
<path d="M70.500,-0.003 C31.562,-0.003 -0.003,31.562 -0.003,70.500 C-        0.003,109.437 31.562,141.002 70.500,141.002 C109.437,141.002 141.002,109.437 141.002,70.500 C141.002,31.562 109.437,-0.003 70.500,-0.003 ZM99.628,83.851 C99.628,83.851 81.325,64.143 81.325,64.143 C81.325,64.143 81.325,118.311 81.325,118.311 C81.325,118.311 59.675,118.311 59.675,118.311 C59.675,118.311 59.675,64.137 59.675,64.137 C59.675,64.137 41.367,83.851 41.367,83.851 C41.367,83.851 24.432,72.287 24.432,72.287 C24.432,72.287 56.661,37.585 56.661,37.585 C56.661,37.585 70.498,22.688 70.498,22.688 C70.498,22.688 84.335,37.585 84.335,37.585 C84.335,37.585 116.567,72.287 116.567,72.287 C116.567,72.287 99.628,83.851 99.628,83.851 Z" id="path-1" class="cls-2" fill-rule="evenodd"/>
</svg>

但是，这段代码似乎不起作用。我可以做些什么来通过媒体查询使其更小？

Answer 1

您的 CSS 语法不正确，但如果您希望图像按比例缩小，它看起来应该是这样的:

#smaller {
    height: 15px;
    width: 15px;
}

@media screen and (max-width: 292px) {
    #smaller {
        height: 10px;
        width: 10px;
    }
}