html - 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 文件中，在 <svg::style> 中元素。 CSS 很简单:

.i { display: none; }
.i:target { display: block; }

这样，任何svg::svg带有 class="i" 的元素自动不可见，除非我们在 SVG url 中专门针对它。所以这样，要显示美国国旗图标，我将使用以下 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 堆叠技术时，是什么导致了这种奇怪的失真？

Answer 1

不知道堆叠和目标。但我知道两种简单的方法.. 可能可以帮助您更轻松地解决问题。

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