html - svg 中的媒体查询未按预期工作

标签 html css svg media-queries

考虑以下 yellow_submarine.svg 图标:

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <style type="text/css">
            @media(max-height:16px){
                #icon16{display:inline;}
                #icon32{display:none;}
            }
        </style>
    </defs>
    <image id="icon16" display="none"   width="100%" height="100%" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABj0lEQVR42s2OA6xcQRSGz3pu7di1hXhjSzWixtazbYS1bZtRLc082/YKf+fena3Nd5LvWDR8RSQylEjoN2QJj9d+bQGP0w41HbCgdR+hItUMkeg48uOvJ7D9nZfN6L9LaD9I6Lm+GSLBhm8PxVsP8xgCjw7xJpLwOkISGfKfR1KL7FnzycyhkkQHpGNLqduzAvBdAdynJMeVPa/sCQRat6DxsFNf3ikHV8pje3qfRUPEWUA81gx33Va4H03F6Zcd2P8MhvXdG/8uPvtmCOg8AHfDHjQccKJhvxP+zi3QZ4nHWTHwbAP6jhOS7gKZd4YM6/kk7jtF6H+wEr7mE/C1nEL3xdEQcXaQSHCg49BkdO4gRJx8jg3n/Ibt2/5xrNebthKq8hiqi6egWdZFAgM9jWa8Mt2KxlxCaw6hPTtkmyThuEXaqnQLXsdpvdvW26O3rbdFv05gvSVJDDTCTnOexjAuEhlEovZFXsez7l2b7HFEtEAyXrFQsoSUzDIChWyO1beHUYMT6Cdkglqm+IvyFjQwP4YCb6vbAAAAAElFTkSuQmCC"/>
    <image id="icon32" display="inline" width="100%" height="100%" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAECklEQVR4AWIgEYyCUQDgrR6gHEuiMADfOGN7bdu2bds22j22bdtsjW0nmbat2Pn3Vl68Guec76Rc/7PakKJFkKif7QBtYgK0OesB2E3siUCAjmf9EgRCXH62AygOxasX6OIJurgI8RJ9AuFwgnohESnPyOY7f9P0LxpL8JlXwVO/Au7qlXCVr4SzZCUcBSvgyF/FIWQgohane3PZrA9V1+viVbAeuhuOvB9Qv4JQs4BQNZVQPppQ3I9g3JIaDND+tF/zQ38qC0qmtICz4CWYt7ZGw2pC7WJC9UxCxXhCyWCuL3oRugT58d4TioPxmnH/+Bgv+kzd5WCcYr64voYkLXKHXY2cwdfAeqA5rHs1MK4l6QzMD5yBUdIZKB3cnsdew49mM8+BP+TzNv2kukKcvX/YXJ7xrfLlgtGXQ5+kinqMZSu/Ul2t+5NQnfYWvMaFgH0NfIItDV5LOrzmDP5n1gz4BFuAXUhnPK5xARp3/Ii8oefjaBzV7/ld+XPW9+pOwU1GvKbsYkht5nOWT4QuPuKMTX1P1U0ctaNwDDz1U2DX3QXboctg2UHHzczs+nvgqujDIdPgrJiKisXPwpDaBAf/lKVv/lH53sE/KLdhxy9wl3/CAZShAKpdvymXVK95l6/zDzBtJJg2SCzMtl6QyuaNx9G2jtu2NINN/yo/LVPgNaWhcU8iiifdguJpN8NdNRbmzQRdQvg90kKcDmfJeDSmyxj5mdMIu7emYvYR+Imy9TjbxNxG1rCG19l2I+yGb+FpSIO7ZgnfRy1gzBIBmoQCtNclKGHZ8yLqlhDqlkpMXB6wAxi+zeknyvbFx9dmCq8jrbmYLZOjflUbrks3sj4xHKCjPlGDuuUdUTOXQoxzCD9lAnEZRj9Rts8+vjaeG1jnn9UuiA3Aj1zVFIpSN5kwe84feH2Jx0+UjcfZJubGrlc9VQiUpxE/hhGXYP0PmsyCgUqUjyWUj5FUsGpWN1qQypXH2VYRWEOsV8GKhiiQ20eN3N5qae1xHCA5HKDFQ5fLH9Qna1EySM4vFTplZaxkoBx5vVT8cmqCrb9qsvu+oOo/4wP1LANvXDRADt4v/Biybq/fonhTpMrrqURxLxlKehOKT1Ahz8vn+YYUDQ4laE2zPlLPuek8+UtEdDu7ht348o2K9/bFaStjP+dadsEdF8qfTf9Ws1HPnXpOfixFHZL9H4JjxLw132g2fH2/8nsiupddy85hbVgz1lLsw24TYaJexYEQ3QId97OHIzwmFhap/wkRPSHGBebdxC5iHQKbKljkPmrWOkBNMT8Va8Has44RzmU3Z/y1PExH7Ctg3w+UUwWpg+rjgxrMSNVGCdRwPeTQgbK1wY6mA2BGDx0om5eSptgoGAUA5/MdcoMAeGkAAAAASUVORK5CYII"/>
</svg>

它嵌入了一个 32 x 32 的 png 潜艇图标,带有三个舷窗。
当空间有限时,它还嵌入了带有两个舷窗的 16 x 16 版本的潜艇。

我使用下面的 html 代码来显示图标:

<html>
    <body>
        Small:<span style="width:16px;height:16px;display:inline-block;background:url(yellow_submarine.svg)no-repeat;background-size:100%;"></span>
        Large:<span style="width:32px;height:32px;display:inline-block;background:url(yellow_submarine.svg)no-repeat;background-size:100%;"></span>
    </body>
</html>

在 Firefox 和 Edge 中以 100% 缩放级别显示时,我得到以下渲染:

Image at 100% zoom

当以 200% 缩放级别显示时,我得到以下渲染:

enter image description here

这就是我感到困惑的地方。当放大 200% 时,svg 现在有 32 个设备像素可用,应该使用 32×32 版本。但它正在重新缩放 16×16 版本。

我应该在媒体查询中输入什么来测试可用的设备像素数?

最佳答案

当我们放大浏览器时,它不会改变可用像素的数量。它只会使一个像素大两倍。这就是为什么当您缩放 200% 时它仍会使用 16×16 版本的 SVG 但会大两倍。

如果你想这样做,你应该使用任何其他方法。

关于html - svg 中的媒体查询未按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67469429/

相关文章:

html - 在 IE 7/8 中渲染 svg

javascript - 使用 JS 覆盖类的样式,以便更改可以在具有该类的所有元素上可见

html - 链接的图像不向左浮动

javascript - 移动菜单 toggleClass 和 removeClass

javascript - 单击按钮添加新的自定义 div

javascript - 如何获取 tspan 元素的位置和宽度

html - 表 :tr and gradient not working

html - @media Queries - css 重复不渲染

jquery - 单击单选按钮时更改背景颜色

svg - 我可以在不使用 z 参数的情况下关闭 SVG 路径吗?