SVG渲染问题iOS

Question

我尝试使用SVG分层精灵，但我在移动版Safari上遇到了一个奇怪的渲染问题。我将其归因于早期采用，但由于它的渲染率为95％，我很想知道是否有其他人可能有解决方案。不过，我可能只需要使用PNG或其他东西。

请注意，在iOS上，只有两个框在底部发生了这种毛刺行为，技术上，这些图像在负空间中重叠。还要注意图像是如何以错误的顺序呈现的。一切都向右移动。

示例图片后要遵循的代码示例：

HTML

<li>
    <a id="email" href="#">
        <img src="social-icons.svg#email" width="115" height="128" alt="E-mail" />
        </a>
</li>
<li>
    <a id="github" href="#">
        <img src="social-icons.svg#github" width="115" height="128" alt="GitHub" />
    </a>
</li>
...

SCSS

li
{
    display: inline;

    &:nth-child( 1 ):after,
    &:nth-child( 3 ):after
    {
        content: ' ';
        display: block;
    }

    @for $i from 1 through 6
    {
        &:nth-child( #{$i} ) a
        {
            @if $i > 1 { top: -30px; }
            @if $i > 3 { top: -60px; }
        }
    }
    ...
}

SVG

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <svg:style xmlns:svg="http://www.w3.org/2000/svg" type="text/css">
        .i { display: none; }
        .i:target { display: block; }
    </svg:style>

    <svg:svg class="i" id="email" width="100%" height="100%" viewBox="0 0 458 512" xmlns:svg="http://www.w3.org/2000/svg">
        ...
    </svg:svg>

    <svg:svg class="i" id="facebook" width="100%" height="100%" viewBox="0 0 458 512" xmlns:svg="http://www.w3.org/2000/svg">
        ...
    </svg:svg>
</svg:svg>

我只提出这个问题，因为正如我所说的那样，它似乎有效，但有一些小问题。为什么图标会呈现错误的，有时是部分的图像？

在我放弃并使用光栅图像之前，有什么我可以尝试的吗？到目前为止，我一直在尝试各种随机属性 - 边距，相对位置，线高等等 - 但每当我减少行之间的间距时，它就会产生毛刺。如果我不在它们之间留下空间，那就很好了。

Answer 1

我能够通过更改HTML源来解决iOS上的渲染问题。我没有使用img元素，而是将它们切换到实际的SVG元素，它可以工作！

有趣的是，如果我只改变了第一个，那么一切都很好，但为了保持一致，我最终都将它们全部切换了。

改变了这个：

<li>
    <a id="email" href="#">
        <img src="icons/queue-icons.svg#email" width="115" height="128" alt="E-mail" />
    </a>
</li>

对此：

<li>
    <a id="email" href="#">
        <svg viewBox="0 0 115 128">
            <use xlink:href="/icons/queue-icons.svg#email"></use>
        </svg>
    </a>
</li>

感谢this article on CSS-Tricks向我提供了一些其他信息。