时间戳

首页 > 解决方案 > 响应式 SVG 未在较大屏幕尺寸下显示完整版本

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，我可以同时看到徽标和文本，如果我缩小窗口，文本就会消失。

但是，如果我将 SVG 添加到img标签中，例如<img src="logo.svg">并在浏览器中查看它，我只会得到徽标标记，无论窗口大小如何。

我一直在将我正在做的事情与这个https://tympanus.net/Tutorials/ResponsiveSVGs/img/logo_mq.svg进行比较，无论我是直接查看 SVG 还是在img标签中链接，我都看不到我的设置与他们的不同。

标签： htmlcsssvg

解决方案

像这样向 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 文件中时，@media查询采用 SVG 元素的宽度，而不是窗口的宽度。这使得 SVG 属性width=535总是呈现 id text。如果您希望 SVG 对页面的整个宽度做出反应，请使用内联 SVG。此外，这可以通过不定义 SVG 的宽度或高度来完成，这允许 HTML 页面定义 SVG 的大小，从而使 SVG 改变其状态。

推荐阅读