我正在尝试使用SVG堆叠技术，使多个图标堆叠在一个文件中，仅需要浏览器进行单个HTTP请求。该技术在此处有详细介绍。
基本思想是将多个SVG元素放入单个SVG文件中，并使用CSS样式隐藏除当前要显示的图标之外的所有图标。您可以使用CSS :target选择器选择当前要显示的图标。
这种技术对我很有效，但是将多个图标堆叠会导致显示的图标出现奇怪的扭曲，即使所有其他图标都被隐藏了。
在我的示例中，我简化为仅堆叠两个图标：美国国旗图标和英国国旗图标。
（简化后的）SVG文件如下：
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="svg153" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="480" width="640" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<svg:style
xmlns:svg="http://www.w3.org/2000/svg" type="text/css">
.i { display: none; }
.i:target { display: block; }
</svg:style>
<svg:svg id="uk" xmlns:svg="http://www.w3.org/2000/svg" class = "i" height="480" width="640" version="1.1">
<!-- SVG elements to draw UK flag -->
</svg:svg>
<svg:svg id="us" xmlns:svg="http://www.w3.org/2000/svg" class = "i" height="480" width="640" version="1.1">
<!-- SVG elements to draw US flag -->
</svg:svg>
</svg>
请注意，CSS样式是嵌入在SVG文件中的，在<svg::style>元素中。 CSS样式很简单：
.i { display: none; }
.i:target { display: block; }
通过这种方式，任何具有class="i"的svg::svg元素都会自动隐藏，除非我们在SVG URL中特别指定它。因此，要显示美国国旗图标，我将使用以下HTML片段：
这样，除非我们专门针对该SVG URL进行目标设置，否则带有class="i"的svg::svg元素都会自动隐藏。因此，如果要显示美国国旗图标，可以使用上述HTML代码。
<img
src="flags.svg#us"
width="80"
height="60"
alt="SVG Stacked Image"
/>
src =“flags.svg#uk”。总之，所有这些都非常有效...除了在堆叠图像时在Firefox和Chrome中发生的奇怪图像失真。
这是我从SVG文件中删除（隐藏）英国国旗时美国国旗的屏幕截图：
如您所见，它看起来很好。
但是当我将它放在英国国旗前面时，它看起来像：
正如您所见，图像变得奇怪扭曲 - 它几乎看起来像在压缩图像中获得很多“伪像”时低质量JPEG的情况。
那么这到底是怎么回事？与美国国旗图标一起堆叠的其他图像都是不可见的，为什么它们会影响可见图标？
我在谷歌上搜索了很多答案，尽管SVG堆叠技术确实存在许多问题和“陷阱”，但它们都涉及跨浏览器兼容性。 但是，在包括IE9在内的大多数较新的浏览器上，该技术运行良好。 而且，失真现象在Firefox和Chrome中都有发生，因此这不太可能是一些跨浏览器问题，而更可能是我做错了什么。
那么，当我应用SVG堆叠技术时，到底是什么导致了这种奇怪的失真？
shape-rendering:cripsEdges。但这是有缺陷的行为，我很惊讶它在Chrome和Firefox中都会出现问题。 - AmeliaBR