SVG堆叠会导致失真
我正在尝试使用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::style>元素中的SVG文件中.CSS很简单:
.i { display: none; }
.i:target { display: block; }
这样,除非我们在SVG网址中专门定位,否则任何svg::svg元素class="i"都会自动隐藏.这样,为了显示美国国旗图标,我将使用以下HTML代码段:
<img
src="flags.svg#us"
width="80"
height="60"
alt="SVG Stacked Image"
/>
当然,要显示英国国旗,我会改变它 src="flags.svg#uk"
无论如何,所有这些都非常有效...除了在堆叠图像时在Firefox和Chrome中都出现奇怪的图像失真.
这是我从SVG文件中删除(隐藏)英国国旗时美国国旗的屏幕截图:
如你所见,它看起来很好.
但是当我把它堆叠在英国国旗前面时,它看起来像:
正如您所看到的,图像变得异常扭曲 - 当您在压缩图像中获得大量"伪像"时,它几乎看起来像低质量JPEG会发生什么.
那么为什么会发生这种情况呢？堆叠有美国国旗图标的其他图像都是不可见的,那么为什么它们会影响可见图标呢？
我用Google搜索了很多寻找答案的内容,虽然SVG堆叠技术肯定有很多问题和"陷阱",但它们都与跨浏览器的兼容性有关.但是,该技术适用于大多数较新的浏览器,包括IE9.此外,失败发生在Firefox 和 Chrome中,因此这不太可能是一些跨浏览器问题,而是我做错了.
那么,当我应用SVG堆叠技术时,是什么导致了这种奇怪的失真？