Question

我有以下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，我都看不到我的设置方式与他们的不同。

Answer 1

像这样向SVG添加样式：

<string.h>

当样式嵌入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始终呈现id width=535。如果您希望SVG对页面的整个宽度做出反应，请使用嵌入式SVG。此外，这可以通过不定义SVG的宽度或高度来完成，该操作允许HTML页面定义SVG的大小，从而使SVG更改其状态。

自适应SVG在较大的屏幕尺寸下未显示完整版本

1 个答案: