代码之家 › 专栏 › 技术社区 › Barry Pollard

根据屏幕大小/媒体查询,防止下载未使用的SVG<image xlink>

media-queries responsive-design svg

0

Barry Pollard · 技术社区 · 6 年前

我有下面的SVG代码直接嵌入在HTML页面的中间:

<!-- Desktop SVG -->
<svg class="desktop">
  <g>
    <image xlink:href="/images/desktop.png" />
    <a xlink:href="/link1">
      <g>
        <circle r="10" cy="84" cx="123" />
      </g>
    </a>
  </g>
</svg>

<!-- Mobile SVG -->
<svg class="mobile">
  <g>
    <image xlink:href="/images/mobile.png" />
    <a xlink:href="/link1">
      <g>
        <circle r="10" cy="5" cx="10" />
      </g>
    </a>
  </g>
</svg>

根据屏幕大小,CSS隐藏其中一个,这一切都很好地工作。

问题是,这两个PNG图像都是在移动设备和桌面上下载的,尽管实际上只会显示一个,这对性能很差。

有没有可能防止这种双重下载 <image> 标签 xlinks 基于媒体查询(比如CSS背景)?

SVG包含可点击的链接(通过 <a xlink:href="..."> 标签),当从外部文件加载SVG时,它们似乎不起作用,因此通过外部文件加载整个SVG代码并将其用作背景图像不是一个选项。

0 回复 | 直到 6 年前

1

Barry Pollard 6 年前

目前看来这是不可能的。

幸运的是,由于PNG覆盖了SVG的整个空间,所以可以将它们从SVG中拉出,只留下xlinks,这实现了我想要的:

<style>
.svg-desktop-image {
        background-image: url("/images/desktop.png");
        background-size: contain;
}
.svg-mobile-image {
        background-image: url("/images/mobile.png");
        background-size: contain;
}
</style>
<!-- Desktop SVG -->
<div class="desktop">
  <svg class="svg-desktop-image">
    <g>
      <a xlink:href="/link1">
        <g>
          <circle r="10" cy="84" cx="123" />
        </g>
      </a>
    </g>
  </svg>
</div>

<!-- Mobile SVG -->
<div class="mobile">
  <svg class="svg-mobile-image">
    <g>
      <a xlink:href="/link1">
        <g>
          <circle r="10" cy="5" cx="10" />
        </g>
      </a>
    </g>
  </svg>
</div>

如果有人有其他建议,我会把这个问题留一段时间,如果没有,我会接受自己的答案。