Question

我在SVG中创建了一整套世界标志，将所有常见样式联合起来（例如，3个垂直条带或3个水平条纹）。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 750 450">
<style>
    rect, line { shape-rendering: crispEdges; }
    svg .f { display: none }
    svg .f:target { display: inline }
</style>
<defs>
<rect id="f31" width="750" height="150"  x="0" y="0" />
<rect id="f32" width="750" height="150"  x="0" y="150" />
<rect id="f33" width="750" height="150"  x="0" y="300" />
</defs>
<svg>
  <svg><g id="am" name="armenia" class="f"><use xlink:href="#f31" fill="#ff0000"/><use xlink:href="#f32" fill="#00f"/><use xlink:href="#f33" fill="#ffa500"/></g></svg>
  <svg><g id="at" name="austria" class="f"><use xlink:href="#f31" fill="#df0000"/><use xlink:href="#f32" fill="#fff"/><use xlink:href="#f33" fill="#df0000"/></g></svg>
  <svg><g id="gm" name="gambia" class="f"><use xlink:href="#f31" fill="#ff0000"/><use xlink:href="#f32" fill="#fff"/><use xlink:href="#f53" fill="#009"/><use xlink:href="#f33" fill="#090"/></g></svg>
</svg>

然后我从CSS调用这个SVG（您也可以直接在HTML上使用＆lt; img src =＆＃34; flags.svg＃am＆＃34; /＆gt;

.wf-am{background-image:url(../svg/isoflags.svg#am)}
.wf-at{background-image:url(../svg/isoflags.svg#at)}
.wf-gm{background-image:url(../svg/isoflags.svg#gm)}

然而，它不会减少负荷，而是创造更多。每个#am或#gm一次又一次地请求isoflags.svg。有250个标志，它可以将整个事情降低到12秒加载。我这样做，所以我不需要请求250个文件，但它真的很难让它工作。关于我能做些什么不同的任何想法？

带引用的SVG，多个加载

0 个答案: