每个设备中的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>