我有以下SVG
<svg width="535" height="242" viewBox="0 0 535 242" xmlns="http://www.w3.org/2000/svg">
<title>SVG</title>
<style>
#text {
opacity: 0;
}
@media all and (min-width: 768px) {
#text {
opacity: 1;
}
}
</style>
<g>
<path id="logo" fill="#FFF" d=""/>
<path id="text" fill="#FFF" d=""/>
</g>
</svg>
只能在小屏幕上显示徽标标记，而在大屏幕上应该显示带有文字的徽标。
如果直接在大窗口中的浏览器中查看SVG，则可以同时看到徽标和文字，如果将窗口缩小，则文字也将消失。
但是，如果我将SVG添加到img标签中，例如<img src="logo.svg">并在浏览器中查看，无论窗口大小如何，我都只会看到徽标。
我一直在比较我对此https://tympanus.net/Tutorials/ResponsiveSVGs/img/logo_mq.svg所做的工作，不管我是直接查看SVG还是链接到img标签中的SVG，我都看不到我的设置方式与他们的不同。
