html - 每个设备中的不同 SVG 布局

Question

我有一个由几个 SVG 元素(多边形和矩形)构建的 Web 布局。我想为最大屏幕尺寸设置单独的 SVG 代码集。 768 像素宽度和最大。 420 像素宽度。这里有人试图为不同的设备设置单独的 SVG 图形集吗？关于如何根据设备屏幕尺寸渲染不同的 SVG 有什么建议吗？非常感谢。

Answer 1

您可以使用 css 媒体查询来执行此操作。这是一个 blogpost一些例子。

例子:

<svg>
    <defs>
        <style type="text/css">
            @media screen and (max-width: 200px) {
                #slogan{
                    display: none;
                }
            }
        </style>
    </defs>
    <g id="slogan">
        ...
    </g>
</svg>