SVG堆叠会导致失真

Question

我尝试 SVG stacking technique 以启用堆叠在单个文件中的多个图标，只需要来自浏览器的单个HTTP请求。该技术的描述非常透彻here。

基本上，您的想法是将多个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的{​​{1}}元素都会自动隐藏，除非我们在SVG网址中专门定位它。这样，为了显示美国国旗图标，我将使用以下HTML代码段：

class="i"

当然，要显示英国国旗，我会将其更改为<img src="flags.svg#us" width="80" height="60" alt="SVG Stacked Image" />

无论如何，所有这些都非常有效......除了在堆叠图像时Firefox和Chrome中都出现奇怪的图像失真。

当我从SVG文件中删除（隐藏）英国国旗时，这里是美国国旗的屏幕截图：

如您所见，它看起来很好。

但是当我把它叠在英国国旗前面时，看起来像是：

正如您所看到的，图像变得异常扭曲 - 当您获得大量的＆＃34;工件时，它几乎看起来像低质量的JPEG会发生什么。在压缩的图像中。

那为什么会发生这种情况呢？堆叠有美国国旗图标的其他图像都是不可见的，那么为什么它们会影响可见图标呢？

我用Google搜索了很多寻找答案的内容，虽然肯定有很多问题，并且＆＃34;陷阱＆＃34;使用SVG堆叠技术，它们都与跨浏览器兼容性有关。但是，该技术适用于大多数较新的浏览器，包括IE9。此外，在Firefox 和 Chrome中都会出现失真，因此这不是一个跨浏览器问题，而是我做错了。

那么，当我应用SVG堆叠技术时，是什么导致了这种奇怪的失真？

Answer 1

不知道堆叠和目标。但我知道两种简单的方法......可能会有更简单的方法帮助你。

1. 当您从网络甚至是计算机中选择不同的svg图标时，每个图标都是独立的。
   • 有一个网站＆＃39; icomoon.io＆＃39;，我们可以从您的计算机中选择在线图书馆或您的自定义svg图标中的不同图标。
   • 打开＆＃39; https://icomoon.io/app/＆＃39;
   • 选择＆＃39;导入图标＆＃39;从您的计算机上传自定义图标。
   • 在页面底部，它有“从库中添加图标...”＆＃39;从在线图书馆中选择图标。
   • 从＆＃39;选择＆＃39;工具（顶部）根据需要选择多个图标。
   • 选择多个图标后，选择生成SVG，PNG，PDF＆＃39;底部的按钮。
   • 然后将所有这些内容合并到一个文件中，点击“设置”图标＆＃39;位于＆＃39;下载＆＃39;旁边。左下角第一个按钮中的选项。
   • 从中选择＆＃39;包含瓷砖（CSS Sprite）。
   • 根据需要将适当的边距和图标数量放在一行中，然后在demo.html中下载带有xml代码的combine sprite，在style.css中下载css定义。
2. 当您使用＆＃39; AI＆＃39;创建了多个图标的单个SVG文件时或任何其他软件。
   • 只需将该文件上传（导入）到icomoon.io，然后点击“生成SVG，PNG，PDF＆＃39;按钮并下载精灵xml文件。

Answer 2

我尝试使用自己的简单svgs并且工作正常，没有发生任何奇怪的失真。所以我的猜测是你和我们的svgs。

http://pastebin.com/dxVtTQKF