html - 自适应 svg 背景

Question

我试图让 svg 根据屏幕尺寸显示不同的图像，因此较小的设备显示较小的图像。例如，如果我想要一个覆盖整个 svg 区域的背景图像，就像这样:

<svg viewBox="0 0 1000 700">
    <defs>
        <style type="text/css">
            #theImage { 
                fill: url('#bg-large');
            }
            @media screen and (min-width: 401px) and (max-width: 800px) {
                #theImage {
                    fill: url('#bg-small');
                }
            }
        </style>

        <pattern id="bg-large" width="100%" height="100%">
            <image xlink:href="large.jpg" width="100%" height="100%" />
        </pattern>

        <pattern id="bg-small" width="100%" height="100%">
            <image xlink:href="small.jpg" width="100%" height="100%" />
        </pattern>
    </defs>

    <rect id="theImage" width="100%" height="100%" />
</svg>

它可以工作，但浏览器会以任何屏幕尺寸下载这两个图像。是否有另一种方法(可能是 svg 属性方式而不是 css)使浏览器仅加载事件屏幕尺寸所需的图像？

Answer 1

媒体查询引用名为“TheImage”的 ID，但没有使用此 ID 标识的对象。您的图像用 id 的“bg-large”和“bg-small”标识。

不过，根据编写的代码，两张图片都会被下载。要显示或不显示它们，您需要通过将其设置为“无”来使用“显示”属性，只要您希望隐藏图像