Html 响应SVG在较大屏幕尺寸下不显示完整版本

我有下面的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
#正文{
不透明度：0；
}
@介质和全部（最小宽度：768px）{
#正文{
不透明度：1；
}
}

只在小屏幕上显示徽标标记，在大屏幕上显示带有文本的徽标标记

如果我在一个大窗口中直接在浏览器中查看SVG，我可以看到徽标标记和文本，如果我将窗口缩小，文本将消失

但是，如果我将SVG添加到

img

标记，例如

，并在浏览器中查看它，那么无论窗口大小，我只会得到徽标标记

---

我一直在比较我正在做的事情，无论我是直接查看SVG还是在

img

标记中链接SVG，我看不出我的设置与他们的设置有什么不同。

将样式添加到SVG中，如下所示：

<svg width="700" height="242" viewBox="0 0 535 242" xmlns="http://www.w3.org/2000/svg">
    <title>SVG</title>
    <defs>
        <style type="text/css"><![CDATA[
            #text {
                opacity: 0;
            }
            @media all and (min-width: 768px) {
                #text {
                    opacity: 1;
                }
            }
        ]]></style>
    </defs>
  <g>
    <path id="logo" fill="#f00" d=" ... "/>
    <path id="text" fill="#000" d=" ... "/>
  </g>
</svg>

SVG

---

当样式嵌入到SVG文件中时，

@media

查询采用SVG元素的宽度，而不是窗口的宽度。这使得SVG属性

width=535

始终呈现id

text

。如果希望SVG对页面的整个宽度做出反应，请使用内联SVG。此外，这可以通过不定义SVG的宽度或高度来实现，这允许HTML页面定义SVG的大小，使SVG改变其状态。

我在原始帖子中发布的链接来自于您可以看到SVG添加在

img

标记中，但它仍然会根据整个屏幕宽度而改变。你说的有道理，但我不明白Codrops示例是如何工作的，而我的示例（设置方式几乎相同）却没有。示例根据SVG元素的宽度而变化。检查开发工具并观察宽度。它将在250和200px时中断，这是嵌入式CSS中定义的。