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>

感谢CSS-Tricks上的这篇文章 ，它为我提供了一些其他信息。